Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Proper way to add a callback to jQuery DatePicker

DatePicker has an internal function, _adjustDate(), which I'd like to add a callback after.

Current Method


This is how I'm currently doing this. Basically, just replacing the function defintion with itself, plus the new operations. This effects all datepickers, which I'm not sure is desired, either.

$(function(){

   var old = $.datepicker._adjustdate;

   $.datepicker._adjustDate = function(){
      old.apply(this, arguments);

      // custom callback here     
      console.log('callback');
   };

});

_adjustDate is what's called during the next/prev month clicks. The function takes three parameters. I'm curious if there's a better way to add the callback.


Expected Result


I'd like to have the end result look like this; where afterAjustDate is the callback handle:

$('#datepicker').datepicker({ 
       showButtonPanel: true
     , afterAdjustDate: function(){ $(this).find('foo').addClass('bar'); }
});

FYI


onChangeMonthYear is not an acceptable event alternative, neither are the live()/delegate() (don't work in IE) binding options.

This comes from the need of applying classes/manipulating elements after the month is selected. Changing the month recreates elements in the calendar; when this is performed jQueryUI is not smart enough to inherit the class changes. Thus, I need a callback after changing the date.

like image 488
vol7ron Avatar asked Nov 04 '10 20:11

vol7ron


2 Answers

There is an onSelect option that you can use to pass a callback function to the datepicker. It sounds like this might be a built-in solution to what you need.

$('.datepicker').datepicker({
  onSelect: function(selectedDate) {
    // custom callback logic here
    alert(selectedDate);
  }
});
like image 188
undeniablyrob Avatar answered Oct 11 '22 19:10

undeniablyrob


I wrote a small demo that does this...

I create an object literal that contains the extensions to $.datepicker and then do $.extend on $.datepicker and my object.

You can check it out here: http://jsfiddle.net/NHN4g/4/

Here's the extension itself:

(function($){
    var datepickerExtensions = {
        _oldAdjustDate: $.datepicker._adjustDate,
        _adjustDate: function(id, offset, period) { 
            var target = $(id);
            var inst = this._getInst(target[0]);
            var afterAdjustDate = this._get(inst, 'afterAdjustDate');
            this._oldAdjustDate(id, offset, period);
            if(afterAdjustDate && typeof afterAdjustDate === 'function'){
                afterAdjustDate(id, offset, period);
            }
        }
    }
    $.extend($.datepicker, datepickerExtensions);
})(jQuery);

And the demo:

(html)

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all">
<div class="demo">
    <p>Date: <input type="text" id="datepicker"></p>
</div><!-- End demo -->

(javascript)

var changed = false;
$("#datepicker").datepicker({ 
    afterAdjustDate: function(i,o,p){
        if(!changed){
            $('.ui-datepicker-month').css('color', '#f00');
        }
        changed = !changed;
    }
});
like image 23
gislikonrad Avatar answered Oct 11 '22 19:10

gislikonrad