18

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.

Community
  • 1
  • 1
vol7ron
  • 35,981
  • 19
  • 104
  • 164
  • You could probably generate a custom plugin that inherits the datapicker code, and add your own methods and events. Each instance of your plugin would have your custom changes intrinsically without later modifications. Ex. When defining your plugin, use the 3 option form `$.widget('ui.myDatepicker','ui.datapicker',{...});` refer to [this post](http://wiki.jqueryui.com/w/page/12138135/Widget-factory) for more info – jyore Aug 24 '11 at 17:38
  • That might be doable :) This is an old question and I've learned a lot about jQuery since I've posted it, but figured I'd offer some rep and get the answers coming in. – vol7ron Aug 24 '11 at 18:46
  • -1 because u havent updated your question with with your comments. – DarthVader Feb 03 '12 at 17:44
  • @DarthVader: again, that doesn't apply here - questions are not horrible solutions (like the kinds you leave) – vol7ron Feb 04 '12 at 21:29

4 Answers4

34

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);
  }
});
undeniablyrob
  • 1,149
  • 2
  • 13
  • 15
17

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;
    }
});
gislikonrad
  • 3,121
  • 2
  • 19
  • 22
  • When I have a chance, I'll check to see if that will work. The problem came from customizing the calendar, but when it redraws, it doesn't inherit changes. – vol7ron Aug 23 '11 at 21:38
  • 1
    Same as what I would have suggested. One suggestion is to add a check if `afterAdjustDate` is a function indeed: `typeof afterAdjustDate === 'function'`. – Mrchief Aug 26 '11 at 15:19
  • I didn't test this out but I need to close this question anyhow. I think it looks food for the most part. If you copy your demo code into your answer (in case jsFiddle ever goes down) I'll select this. – vol7ron Aug 27 '11 at 23:09
  • http://jsfiddle.net/NHN4g/9/ is a more comprehensive demo that shows the code changing css of the datepicker post-draw... This demo is also shown in the answer... – gislikonrad Aug 27 '11 at 23:49
0

On Datepicker v1.0.0 you can use the pick option.

    var date = new Date();
    $('.datepicker-trigger').datepicker({
        format: 'mm/dd/yyyy',
        autoPick: false,
        startDate: date.getDate(),
        changeMonth: false,
        changeYear: false,
        autoHide: true,
        pick: function (selectedDate) {
            console.log(selectedDate);
        }
    });
jrenouard
  • 419
  • 6
  • 8
0

Open source file and you fill see there are several callback function you can use in default_options

        onSelectDate: function () {},
        onSelectTime: function () {},
        onChangeMonth: function () {},
        onGetWeekOfYear: function () {},
        onChangeYear: function () {},
        onChangeDateTime: function () {},
        onShow: function () {},
        onClose: function () {},
        onGenerate: function () {},
Kyle Bing
  • 170
  • 1
  • 14