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

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) t开发者_如何学Goo 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.

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/

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()

Just in case, to define a callable method you must follow this pattern for the method name:

_<methodName>Datepicker(target, param1, param2,...,paramN)

and if you need to call any internal method that requires a reference to the calendar instance, you must do:

var inst = this._getInst(target);
this._internalMethod(inst);