jQuery Datepicker: User Going to Next Month or Previous Month?

Question

I need to repopulate the datepicker with custom css after the user either clicks the 'Next' month or the 'Previous' month. I'm tapping into the onChangeMonthYear event but don't know which way the user is going (next month or previous month). Is there anything simple built in that would give me this? If not, what is the simplest solution?

* Adding code here to clarify Please note that the events will actually come in via server-side and I've just dummied out some data here while I build*

 var Event = function(text, className) {
            this.text = text;
            this.className = className;
        };

        var events = {};
        events[new Date("11/12/2012")] = new Event("A Good Day", "yellowDot");
        events[new Date("11/20/2012")] = new Event("Mkay", "blueDot");

        $('#date').datepicker({              
           beforeShowDay: function (date) {
               var event = events[date];
               if(event) {
                   return [true, event.className, event.text];
               }
               else {
                   return [true, '', ''];
               }
           },
           onChangeMonthYear: function () {
               //reload another calendar, past or future?

           }
        });

Solution 1

You're passing an onChangeMonthYear handler function to the datepicker widget. That function will be called with three arguments:

• the newly selected year,
• the newly selected month,
• the datepicker widget instance.

Therefore, you can write something like:

onChangeMonthYear: function(year, month, widget) {
    reloadCalendar(month, year);
}

The widget instance argument is provided as a shortcut to avoid going through the bridge if you want to manipulate the autocomplete widget. For example, should you want to close the datepicker immediately, it allows you to write:

widget.hide();

Instead of:

$(this).datepicker("hide");

Solution 2

Datepicker created dynamically, so you should use .live

$('.ui-datepicker-next').live("click", function() {
  alert(1)
}