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.

Answer 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/