How do I Implement Custom Functionality After the Month is Changed?

I'm using the jQuery datepicker as an inline calendar that is used to filter the data on a page. Instead of the normal post events that it does, I used jQuery selectors to re-write the date links to be real hyperlinks.

So if I'm on page http://mysite.com/mypage, the hyperlinks will be http://mysite.com/mypage/2011-1-1, http://mysite.com/mypage/2011-1-2, etc.

So I've got a datepicker

$(function () {
    $('.calendar').datepicker({
        showOtherMonths: false
    });
    configureCalendarLinks();
});   

And some code to modify the links:

    configureCale开发者_开发知识库ndarLinks = function (calendarId) {
        calendarId = calendarId || '';

        var calendarIdSelector = calendarId != '' ? '#' + calendarId + ' ' : '';
        var rootUrl = getShowRootUrl(location.href);

        $(calendarIdSelector + 'a.ui-state-default').attr('href',
            function () {
                var url = rootUrl + .getFullDate($(this).text(), calendarId));
                return url;
            });
    };

getFullDate = function (date, calendarId) {
    calendarId = calendarId || '';
    var dDate;
    if (calendarId == '')
        dDate = new Date(getDatePickerCalendarYear(), getDatePickerCalendarMonth(), date);
    else
        var dDate = new Date(getDatePickerCalendarYear(calendarId), getDatePickerCalendarMonth(calendarId), date);

    return date;
};

getDatePickerCalendarYear = function (calendarId) {
    calendarId = calendarId || '';
    var calendarIdSelector = calendarId != '' ? '#' + calendarId + ' ' : '';
    var calendarYear = $(calendarIdSelector + '.ui-datepicker-year').eq(0).text();
    return calendarYear;
};

.getDatePickerCalendarMonth = function (calendarId) {
    calendarId = calendarId || '';
    var calendarIdSelector = calendarId != '' ? '#' + calendarId + ' ' : '';
    var monthNumber = getMonthNumber($(calendarIdSelector + '.ui-datepicker-month').eq(0).text());
    return monthNumber;
};

getMonthNumber = function (monthName) {
    var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    var index = $.inArray(monthName, monthNames);
    return index;
};

And everything worked fine until I changed the month. How do I get the code to run again when the month is changed with the datePicker? I tried using onChangeCalendar and onBeforeShow, but those fire before the calendar changes, which causes the dates to be empty.

Ideally, I'd like to re-run configureCalendarLinks in an onAfterShow() method, but there is no such thing. Is there a way to do this?

Thanks

And if there's an easy, better different way to accomplish what I'm trying to do . . . that's ok, too.

This might be what you are looking for?

onChangeMonthYear

http://jqueryui.com/demos/datepicker/#event-onChangeMonthYear