jQuery custom plugin -how to add a function

Question

I made a simple plugin for jQuery, which sets minDate and maxDate for two given datePickers. Now i want to extend it and add a function to set dates.

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

console says: Uncaught TypeError: Object [object Object] has no method 'setDate'. Whats the best way to add more function to the plugin?

Here is a jsbin: http://jsbin.com/acovuj/2/edit

iainjmitchell.com/blog/?p=360 this article explains approach on good example. — Tommi
– Tommi, Commented Jul 4, 2013 at 14:51
One way to do it is like jQuery UI (api.jqueryui.com/button/#method-enable) where you pass in the method name as a string and then handle that to call an internal function. Which is basically what Tommi's link explained! — Richard Dalton
– Richard Dalton, Commented Jul 4, 2013 at 14:52
Change this.setDate to self.setDate and it should work. However, this is not a good approach and you should take a look at jQuery Boilerplate for a better design pattern. — mekwall
– mekwall, Commented Jul 4, 2013 at 14:58
@Marcus Ekwall "Change this.setDate to self.setDate and it should work" no, it doesnt. same error: jsbin.com/acovuj/3/edit — user1930254
– user1930254, Commented Jul 4, 2013 at 15:17
@user1930254 Then change your pattern according to the boilerplate. — mekwall
– mekwall, Commented Jul 4, 2013 at 15:19

janos · Accepted Answer · 2013-07-06 12:56:42Z

There are many ways to accomplish this, as pointed out by the many comments.

Here's a boilerplate I find simple and easy to understand:

;(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);

In this setup you call the setDate method like this:

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

That is, the name of the method setDate you actually want to call is an argument to dateRange, you don't call it directly.

I don't remember where I've seen this example, but I've been using this and it works nicely for me. For a complete but simple example using this technique, here's a jQuery plugin I created a few days ago. I hope it will help.

Collectives™ on Stack Overflow

jQuery custom plugin -how to add a function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related