如何扩展jQueryUI datepicker以接受附加参数？

我喜欢jQueryUI datepicker的可定制性，允许一个按钮触发显示datepicker，但不幸的是，它不允许您自定义自己的标记

如果我有这样的标记：

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

下面是上述代码的一部分：

这一切都很好，但我真正想做的是向datepicker函数传递一个附加参数，该参数指定一个对象或选择器，指示应该触发显示的元素

例如，我真的希望能够做到这一点：

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

我知道如何扩展jQuery来添加方法和创建插件，但我不确定如何（或者是否可能）修改现有函数中允许的参数

有人知道我如何扩展

$.datepicker

以实现我的目标，或者至少为我指明了正确的方向吗？任何帮助都将不胜感激。

如何：

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");
        });
    }
}

用法：

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

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

示例：

---

或者，使用您自己的jQuery插件，可以减少干扰：

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

（类似用法，除了使用

datepicker2

或任何您命名的名称）

---

示例：

您无法扩展，因为datepicker不使用小部件工厂，因此您无法使用它来扩展它，但您可以覆盖这些方法并插入代码。有关Jquery UI Datepicker使用的方法的完整列表，请检查Datepicker.js或Jquery UI.js

您可以简单地将该代码添加到自定义JS文件中，并在重写后像往常一样调用datepicker

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

---

以防万一，要定义可调用的方法，方法名称必须遵循以下模式：

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

---

谢谢安德鲁，回答得好！我很高兴您展示了这两种方法。@AndrewHitaker:即使1.8中的datepicker不使用widget工厂，也可以通过

$.widget

扩展datepicker吗？这似乎是在说不。@superjos:不，那是不可能的。但是这个答案并没有使用widget小部件工厂来扩展datepicker，它只是从一个新的小部件中调用datepicker。感谢您向我澄清这一点。有关其他信息，您必须确保在datepicker启动之前启动发布的代码段，这可能会有问题，因为datepicker在doc.ready上启动。非常感谢。。。我挠头想弄明白为什么我的小部件扩展不能工作。

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

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