Question

我喜欢jQueryUI datepicker是可自定义的，允许按钮触发显示日期选择器，但不幸的是，它不允许你自定义自己的标记。

如果我有这样的标记：

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

为了在点击按钮时显示日期选择器，我必须实现以下代码：

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

以上是上述代码的jsFiddle：http://jsfiddle.net/P9Qmu/

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

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

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

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

有谁知道如何扩展$.datepicker以实现我想要做的事情或者至少指出我正确的方向？任何帮助将不胜感激。

Answer 1

怎么样：

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

示例： http://jsfiddle.net/gduhm/

或者，不那么干扰你自己的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或其他任何名称）

示例： http://jsfiddle.net/puVap/

Answer 2

您无法扩展，因为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()

Answer 3

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

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

如果您需要调用任何需要引用日历实例的内部方法，您必须执行以下操作：

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

如何扩展jQueryUI datepicker以接受其他参数？

3 个答案: