如何扩展jQueryUI datepicker以接受其他参数? [英] How can I extend jQueryUI datepicker to accept an additional argument?

问题描述

我喜欢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来实现我想要做的事情，或者至少将我指向正确的方向吗?任何帮助将不胜感激.

解决方案

怎么样:

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/

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.

解决方案

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/

这篇关于如何扩展jQueryUI datepicker以接受其他参数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！