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

Posted 2023-05-09

【中文标题】如何扩展 jQueryUI datepicker 以接受附加参数？

【英文标题】：How can I extend jQueryUI datepicker to accept an additional argument?

【发布时间】：2011-12-05 17:48:38

【问题描述】：

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

如果我有这样的标记：

<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 以实现我想要做的事情或至少为我指明正确的方向？任何帮助将不胜感激。

【参考方案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/

【讨论】：

谢谢安德鲁，很好的回答！我很高兴你展示了这两种方法。

@AndrewWhitaker：可以通过$.widget 来扩展日期选择器，即使 1.8 中的日期选择器不使用小部件工厂？这个SO answer 似乎拒绝了。

@superjos：不，这是不可能的。但是这个答案没有使用小部件小部件工厂来扩展日期选择器，它只是从新小部件中调用日期选择器。

太棒了。感谢您向我澄清这一点

有关更多信息，您必须确保发布的代码 sn-p 在 datepicker 启动之前启动，这可能会在 datepicker 在 doc.ready 上启动时出现问题。

【参考方案2】：

您不能扩展，因为日期选择器不使用小部件工厂，因此您不能使用它来扩展它，但您可以覆盖方法并注入您的代码。有关 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()

【讨论】：

非常感谢...我一直在挠头，试图了解为什么我的小部件扩展程序不起作用。

【参考方案3】：

为了以防万一，要定义一个可调用的方法，你必须遵循这个模式来命名方法：

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

如果你需要调用任何需要引用日历实例的内部方法，你必须这样做：

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