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

Question

I like that jQueryUI datepicker is customizable enough to allow for a button to trigger showing the datepicker, but, unfortunately, it doesn't allow you to customize your own markup.

If I have markup like so:

<span>
    <input type="text" class="datepicker" />
</span>
<span>
    <button class="datepicker-trigger">Open</button>
</span>

In order to get it the datepicker to show when clicking the button, I'd have to implement the following code:

$('.datepicker').datepicker({
    showOn:'none'
});
$('.datepicker-trigger').click( function() {
    $('.datepicker').datepicker('show');
});

Here's a jsFiddle of the above code: http://jsfiddle.net/P9Qmu/

This is all well and good, but what I really want to do is pass the datepicker function an additional argument that specifies an object or selector indicating what element should trigger the showing.

For example, I'd really like to be able to do this:

$('.datepicker').datepicker({
    showOn:'none',
    trigger:'.datepicker-trigger'
});

I know how to extend jQuery to add methods and create plugins, but I'm not sure how (or if it's possible) to modify the allowed arguments in an existing function.

Does anyone know how I could extend $.datepicker to achieve what I'm looking to do or at least point me in the right direction? Any help would be much appreciated.

Solution 1

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/

Solution 2

You cannot extend because the datepicker does not use the widget factory and thus you can't use it to extend it but you can override the methods and can inject your code. For complete list of methods that Jquery UI Datepicker uses check datepicker.js or jquery-ui.js

You can simple add that code in your Custom JS file and after overriding you can call datepicker as usual

$.datepicker._selectDay_old = $.datepicker._selectDay;
$.datepicker._selectDay = function(id, month, year, td) {
    this._selectDay_old(id, month, year, td);
    // Your code here
    console.log("Injected Custom Method");
}

// Call Datepicker after Injecting code
$("#datepicker").datepicker()

Comments

[Philip Walton]

Thanks Andrew, great answer! I'm glad you showed both methods.

[superjos]

@AndrewWhitaker: can one actually extend datepicker by means of $.widget, even if datepicker in 1.8 doesn't use the widget factory? This SO answer seems to say no.

[Andrew Whitaker]

@superjos: No, that isn't possible. But this answer doesn't use the widget widget factory to extend datepicker, it just calls datepicker from within a new widget.

[superjos]

great. Thanks for clarifying this to me

[Jason]

For additional info, you have to make sure the code snippet posted is initiated prior to datepicker initiating, which may be problematic as datepicker initiates on doc.ready.

[VictorEspina]

Thanks a lot... I was scratching my head trying to understand why my widget extension wasn't working.