0

我为 jQuery 制作了一个简单的插件，它为两个给定的 datePicker 设置 minDate 和 maxDate。现在我想扩展它并添加一个函数来设置日期。

JS

(function($) {

    $.fn.dateRange = function(){
        return this.each(function () { 
            var from, to;
            var self = $(this);
            var selectedDate;
            $("input",this).prop('readonly', true);
            from = $('.from',this);
            to = $('.to',this);
            from.datepicker({
                onClose:function( selectedDate ) {
                    $(this).siblings(".to").datepicker( "option", "minDate", selectedDate );
                }
            });

            to.datepicker({
                onClose:function( selectedDate ) {
                    $(this).siblings(".from").datepicker( "option", "maxDate", selectedDate );
                }
            });
            //add a function
            this.setDate = function (f, t) {
                from.datepicker("option",{
                     defaultDate: new Date(f),
                     maxDate: new Date(t)
                 }).val(f);

                to.datepicker("option",{
                     defaultDate: new Date(t),
                     minDate: new Date(f)
                 }).val(f);
             };
        });
    };

})(jQuery);


$("div.dateRange").dateRange();

//later

$("#label1").dateRange().setDate("07/02/2013","07/06/2013");

控制台说：未捕获的类型错误：对象 [object Object] 没有方法“setDate”。向插件添加更多功能的最佳方法是什么？

这是一个 jsbin：http: //jsbin.com/akovuj/2/edit

4

1 回答 1

1

正如许多评论所指出的，有很多方法可以做到这一点。

这是一个我觉得简单易懂的样板：

;(function($) {

    function init(options) {
        return this.each(function() {
            // your initialization comes here
            // ...
        });
    }

    function setDate(date1, date2) {
        // your implementation comes here
        // ...
    }

    var methods = {
        init: init,
        setDate: setDate
    };

    $.fn.dateRange = function(method) {  
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        }
        else if (typeof method === 'object' || ! method) {
            return methods.init.apply(this, arguments);
        }
        else {
            $.error('Method ' + method + ' does not exist on jQuery.datePicker');
        }
    };  
})(jQuery);

在此设置中，您可以像这样调用该setDate方法：

$("#label1").dateRange("setDate", "07/02/2013", "07/06/2013");

也就是说，setDate您实际要调用的方法的名称是 的参数dateRange，您不要直接调用它。

我不记得我在哪里看到过这个例子，但我一直在使用它，它对我很有效。对于使用此技术的完整但简单的示例，这是我几天前创建的一个 jQuery 插件。我希望它会有所帮助。

于 2013-07-06T12:56:42.590 回答