How to clone jquery datepicker?

Question

I need to clone (to inherite) from datepicker jQuery object and override _generatedHTML method. My code:

$.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;
    }
})

But I am not sure that I have different objects $.fn.datepicker and $.fn.datepickerExt..

Link for JSFiddle: http://jsfiddle.net/konstantin/9Rjna/

In this case header need to be added only for datepickerExt...

Unfortunately, this is not answer for my question. I need to inherit from existing datepicker (like own plugin) — Konstantin Petrenko
– Konstantin Petrenko, Commented Jun 4, 2012 at 14:32

Konrad Viltersten · Accepted Answer · 2012-12-12 14:13:09Z

I come across same problem and after gone through most suggested solution, I got a way out.

$('#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'
}
);

After insert the cloned elements (within ID "actions"):

Remove every datepicker ID so they will be detected otherwise new created datepicker will still stick to particular input ID
Remove datepicker button or it will duplicate on cloned element
Unbind datepicker (don't know much about this but a must)
Destroy datepicker
Now everything is clean-up, re-initialize datapicker event

andres descalzo · Accepted Answer · 2012-12-12 14:42:35Z

First, you have to clone the object $.datepicker which is an instance of Datepicker (Private class in jQuery code). otherwise, you would only do a copy, and you write the same method.

Second, you have to copy the code of $.fn.datepicker, because it internally calls the instance of $.datepicker.

Code:

(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

This is not working, as when clicking on some date, original datepicker functionality is called and thus new generate function is not called. Can easily see in sample that when clicking on date header disappears.

Collectives™ on Stack Overflow

How to clone jquery datepicker?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related