如何克隆 jquery datepicker？

Question

我需要从 datepicker jQuery 对象中克隆（继承）并覆盖 _generatedHTML 方法。 我的代码：

$.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 添加标题...

Answer 1

我遇到了同样的问题，经过大多数建议的解决方案后，我找到了出路。

$('#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“actions”内）：

1. 删除每个 datepicker ID，以便检测到它们，否则新创建的 datepicker 仍将坚持特定的输入 ID
2. 删除 datepicker 按钮，否则它将在克隆元素上重复
3. 解除绑定datepicker（对此了解不多，但必须）
4. 销毁日期选择器
5. 现在一切都已清理完毕，重新初始化 datapicker 事件

Answer 2

首先，您必须克隆对象$.datepicker，它是Datepicker（jQuery 代码中的私有类）的一个实例。否则，你只会做一个复制，你写同样的方法。

其次，你必须复制$.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