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”中）：

删除所有 datepicker ID，以便检测到它们，否则新创建的 datepicker 仍将保留特定输入ID
删除 datepicker 按钮，否则它将复制克隆元素
取消绑定 datepicker （对此不太了解但必须知道）
销毁 datepicker
现在一切都已清理，重新初始化 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

如何克隆jquery datepicker？

2 个答案: