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

问题描述

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

如果我有这样的标记:

<input type="text" class="datepicker"/></span><跨度><button class="datepicker-trigger">打开</button></span>

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

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

这是上面代码的jsFiddle:http://jsfiddle.net/P9Qmu/

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

例如，我非常希望能够做到这一点:

$('.datepicker').datepicker({showOn:'无',触发器:'.datepicker-trigger'});

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

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

解决方案

怎么样:

var __picker = $.fn.datepicker;$.fn.datepicker = 函数(选项){__picker.apply(this, [options]);var $self = this;如果(选项&& options.trigger){$(options.trigger).bind("click", function () {$self.datepicker("show");});}}

用法:

$("#date").datepicker({触发器:#button"});$("#date2").datepicker({触发器:#button2"});

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

---

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

$.widget("ui.datepicker2", {_init:函数(){var $el = this.element;$el.datepicker(this.options);如果(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屋！