jQuery Datepicker "After Update" Event or equivalent

Question

I am using a standard jQuery Datepicker and I need to modify the text in each TD based on some daily status information. I realize I can wire up the beforeShowDay event but that only allows me to modify CSS information for each date. Hoping for an event on the entire calendar such as afterRender etc.

I can modify the first calendar that is displayed but if the user changes months or years, I (or my code) is out of the loop.

Solution 1

Looks like afterShow() and onAfterChangeMonthYear() are already raised an enhancements, but there doesn't seem to be any work on them yet.

You could (for now) implement it yourself…

Download the latest uncompressed source v1.8.13 - see http://blog.jqueryui.com/2011/05/jquery-ui-1-8-13/ and search for _updateDatepicker: function(inst) { then add a new function call. Here is how I laid out the new function:

_updateDatepicker: function(inst) {
    // existing jQueryUI code cut for brevity
    this._afterShow(inst);
},
_afterShow: function(inst) {
    var afterShow = this._get(inst, 'afterShow');
    if (afterShow)
        afterShow.apply((inst.input ? inst.input[0] : null),
                [(inst.input ? inst.input.val() : ''), inst, inst.dpDiv.find('td:has(a)')]);
},

I just coded the function to have the same signature as beforeShow() but then added a 3rd parameter - an array of <td> elements.

You can then add your own callback to the datepicker() in the usual way.

<script type="text/javascript">
    $(function() {
        $('#dp').datepicker({
            afterShow: function (input, inst, td) {
               console.log(td); // needs a browser with a console (Chrome / Firefox+Firebug for example)
            }
        });
    });
</script>
<input type="text" id="dp"/>

Note: I've not done a great deal of testing, but it seems to be called after the datepicker is rendered. It may need some more work to fit in with your requirements if it's not exactly what you are after. Hope it helps nonetheless :-)

Solution 2

if you need a "afterShow"-event before jquery-ui version 1.9 you can overwrite the datepicker._updateDatepicker function.

for example:

$(function() {
    $.datepicker._updateDatepicker_original = $.datepicker._updateDatepicker;
    $.datepicker._updateDatepicker = function(inst) {
        $.datepicker._updateDatepicker_original(inst);
        var afterShow = this._get(inst, 'afterShow');
        if (afterShow)
            afterShow.apply((inst.input ? inst.input[0] : null));  // trigger custom callback
    }
});

Now the datepicker raise an "afterShow" event after every update from the datepicker element.

I know it isn't the best way to solve this problem, but it's better than change the original jquery-ui code.

Solution 3

You can do this:

$('.selector').datepicker({
   beforeShowDay: function(date) { 
       /*some function to do before display*/ 
   },
   onChangeMonthYear: function(year, month, inst) { 
       /*some function to do on month or year change*/ 
   }
});

See DOCs

Comments

[andleer]

Neal, I know about these and in fact use them in this particular application but I need to modify the TD text contents after the text has been rendered and that can only be accomplished after these events are done firing. Even an event such as afterShowDay(date) would work.

[andleer]

This answer appears to address my issue but I have not explored the actual solution. We decided that for now, the ability to style the day via the onBeforeShowDay event likely covers 80% of our customer's needs. (Our customer is an internal business department in our company and that is good enough for now.)

[MatRt]

Good answer. but you shoud append your modification externally, in order to leave intact the original jquery file. In your proper JS file, you can make modification like saving the original function $.datepicker._updateDatepicker_original = $.datepicker._updateDatepicker; and modify the new version (which call the old one first).

[MW.]

Ideally, monkey patches should look check library version. Consider adding this to the top of the function: <code>if ($.ui.version == undefined && $.ui.version.indexOf('1') != 0) { return; }</code>

[machineaddict]

You could wrap up everything in (function($) { and })(jQuery);, instead of $(function() {}); like the widget is made.

[machineaddict]

Markus answer is better as it's adding functionality to the existing widget without touching the original code. Your code inside setTimeout is called for every single day in the current calendar, which is pretty bad.

[Renato Gama]

I agree with you, as I said: ugly hack. This was the only solution I could get to work! I left this answer as a "last resort" option for any other desperate soul. I'll try refactoring my code ASAP to fix this.

[userlond]

It's a brilliant solution. Works with jquery ui 1.11.4 + jquery 1.11.3

[KlausCPH]

Or you can use setTimeout inside onChangeMonthYear instead, and it will only fire once per month-render. But still a hack...