How can I extend jQueryUI datepicker to accept an additional argument?

How about:

var __picker = $.fn.datepicker;

$.fn.datepicker = function(options) {
    __picker.apply(this, [options]);
    var $self = this;

    if (options && options.trigger) {
        $(options.trigger).bind("click", function () {
            $self.datepicker("show");
        });
    }
}

Usage:

$("#date").datepicker({
    trigger: "#button"
});

$("#date2").datepicker({
    trigger: "#button2"
});

Example: http://jsfiddle.net/gduhm/


Or, less intrusively with your own jQuery plugin:

$.widget("ui.datepicker2", {
    _init: function() {
        var $el = this.element;
        $el.datepicker(this.options);

        if (this.options && this.options.trigger) {
            $(this.options.trigger).bind("click", function () {
                $el.datepicker("show");
            });
        }
    }
});

(Similar usage, except use datepicker2 or whatever you name it)

Example: http://jsfiddle.net/puVap/

Leave a Comment