如何克隆jquery datepicker？

我需要從datepicker jQuery對象克隆（繼承）並覆蓋_generatedHTML方法。我的代碼：如何克隆jquery datepicker？

$.fn.datepickerExt = $.fn.datepicker; 
var datepickerOldHTML = $.datepicker._generateHTML; 

var datepickerExt = $.extend($.datepicker, { 
    _generateHTML: function(inst) { 
     var generatedHTML = datepickerOldHTML.apply(this, arguments); 
     return "<div style='text-align:center'>header</div>"+generatedHTML; 
    } 
})

但我不知道，我有不同的對象$ .fn.datepicker和$ .fn.datepickerExt ..

鏈接的jsfiddle：http://jsfiddle.net/konstantin/9Rjna/

在這種情況下，頭只需要添加datepickerExt ...

來源

2012-06-04 Konstantin Petrenko

[這個問題]（http://stackoverflow.com/a/2358933/901048）上週幫我類似的問題。 – Blazemonger

不幸的是，這不是我的問題的答案。我需要繼承現有的datepicker（如自己的插件） –

我遇到了同樣的問題，經過大多數建議的解決方案後，我找到了出路。

$('#actions').append($new_row); 
$('#actions').find('input.datepicker').removeClass("hasDatepicker").removeAttr('id'); 
$('#actions').find('button.ui-datepicker-trigger').remove(); 
$('#actions').find('input.datepicker').unbind(); 
$('#actions').find('input.datepicker').datepicker('destroy'); 
$('#actions').find('input.datepicker').datepicker(
{ 
    autoSize:false, 
    showOn:'button', 
    dateFormat:'yy-mm-dd', 
    weekHeader: 'W', 
    showWeek: true, 
    firstDay: 0, 
    changeMonth: true, 
    changeYear: true, 
    gotoCurrent:true, 
    showButtonPanel:true, 
    showAnim:'', 
    duration:'fast' 
} 
);

後插入克隆的元件（內ID「動作」）：

刪除每日期選擇器 ID，以便它們將被檢測到，否則新創建日期選擇器仍將堅持特定的輸入ID
刪除日期選擇器按鈕或將克隆複製元件上
拆散日期選擇（不很瞭解這一點，但必須的）
銷燬日期選擇器
現在一切都清理，重新初始化datapicker事件

來源

2012-12-12 13:54:54

首先，你必須克隆作爲Datepicker（jQuery代碼中的私有類）的實例的對象$.datepicker。否則，你只會做一個副本，並且你寫同樣的方法。

其次，您必須複製$.fn.datepicker的代碼，因爲它在內部調用$.datepicker的實例。

代碼：

(function($, window, undefined) { 

    $.datepickerExt = jQuery.extend({}, $.datepicker); 
    var datepickerOldHTML = $.datepicker._generateHTML; 

    $.datepickerExt._generateHTML = function(inst) { 
     var generatedHTML = datepickerOldHTML.apply(this, arguments); 
     return "<div style='text-align:center'>header</div>" + generatedHTML; 
    }; 

    $.fn.datepickerExt = function(options) { 

     /* Verify an empty collection wasn't passed - Fixes #6976 */ 
     if (!this.length) { 
      return this; 
     } 

     /* Initialise the date picker. */ 
     if (!$.datepickerExt.initialized) { 
      $(document).mousedown($.datepickerExt._checkExternalClick). 
      find('body').append($.datepickerExt.dpDiv); 
      $.datepickerExt.initialized = true; 
     } 

     var otherArgs = Array.prototype.slice.call(arguments, 1); 
     if (typeof options == 'string' && (options == 'isDisabled' || options == 'getDate' || options == 'widget')) return $.datepickerExt['_' + options + 'Datepicker'].apply($.datepickerExt, [this[0]].concat(otherArgs)); 
     if (options == 'option' && arguments.length == 2 && typeof arguments[1] == 'string') return $.datepickerExt['_' + options + 'Datepicker'].apply($.datepickerExt, [this[0]].concat(otherArgs)); 
     return this.each(function() { 
      typeof options == 'string' ? $.datepickerExt['_' + options + 'Datepicker']. 
      apply($.datepickerExt, [this].concat(otherArgs)) : $.datepickerExt._attachDatepicker(this, options); 
     }); 
    }; 

}());

run

來源

2012-12-12 14:42:35

這不起作用，因爲當點擊某個日期時，原始的datepicker功能被調用，因此不會調用新的生成函數。在樣本中可以輕鬆看到點擊日期標題時消失。 – user2846569

如何克隆jquery datepicker？

回答

相關問題