Proper way to add a callback to jQuery DatePicker
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;
}
});
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);
}
});