Как клонировать jquery datepicker?

Мне нужно клонировать (наследовать) объект jQuery datepicker и переопределить метод _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...


inheritance datepicker jquery uidatepicker jquery-ui-datepicker
person Konstantin Petrenko    schedule 04.06.2012    source источник
comment
Этот вопрос помог мне решить аналогичную проблему на прошлой неделе.   -  person Blazemonger    schedule 04.06.2012
comment
К сожалению, это не ответ на мой вопрос. Мне нужно наследовать от существующего средства выбора даты (например, собственного плагина)   -  person Konstantin Petrenko    schedule 04.06.2012

Ответы (2)


arrow_upward
2
arrow_downward

Я сталкиваюсь с той же проблемой, и после того, как я прошел через большинство предлагаемых решений, я нашел выход.

$('#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 «действия»):

  1. Удалите каждый идентификатор datepicker, чтобы они были обнаружены, в противном случае новый созданный datepicker по-прежнему будет привязан к определенному идентификатору ввода.
  2. Удалите кнопку datepicker, иначе она будет дублироваться на клонированном элементе.
  3. Отменить привязку datepicker (мало об этом знаю, но обязательно)
  4. Уничтожить датчик
  5. Теперь все очищено, повторно инициализируйте событие datapicker
person Fredric Yeung    schedule 12.12.2012

arrow_upward
0
arrow_downward

Во-первых, вам нужно клонировать объект $.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);
        });
    };

}());

выполнить

person andres descalzo    schedule 12.12.2012
comment
Это не работает, так как при нажатии на какую-либо дату вызывается исходная функция выбора даты, и поэтому новая функция генерации не вызывается. На примере легко увидеть, что при нажатии на дату заголовок исчезает. - person user2846569; 15.10.2015