jQuery UI datepicker prev/next broken

Question

Ok, I'm using the jQuery UI datepicker as a replacement for the terrible AjaxToolkit datepicker, but I've run into an issue.

For some reason, the datepicker's prev/next buttons no longer exhibit the correct behaviour, and instead move from this month (selected as default) to december 1899 for previous and january 1900 for next.

Can anyone suggest why this is happening?

Binding code as follows:

$('.jQueryCalendarComponent').live('click', function() {
    $(this).removeClass('hasDatepicker').datepicker({
    showOn: 'both',
    showAnim: '',
    dateFormat: 'dd/mm/yy',
    buttonImage: 'images/calendar.gif',
    buttonImageOnly: true
    }).focus();
 }).datepicker({
    showOn: 'both',
    showAnim: '',
    dateFormat: 'dd/mm/yy',
    "buttonImage: 'images/calendar.gif',
    buttonImageOnly: true
 });

Live('click') is used in a similar manner to live would be used to attach an event, and .jQueryCalendarComponent is a textbox.

Answer 1

You don't need to use live for your datepicker. Calling datapicker on the textbox will set up the events for you. Each time you click on the text box you are stacking datepickers on it. This could explain the strange functionality. Try something like:

$('.jQueryCalendarComponent').datepicker({
    showOn: 'both',
    showAnim: '',
    dateFormat: 'dd/mm/yy',
    buttonImage: 'images/calendar.gif',
    buttonImageOnly: true
});

Answer 2

The previous widget is in effect and getting overriden, this can lead to funny things...try this instead:

$(this).datepicker('destroy').datepicker({
showOn: 'both',
showAnim: '',
dateFormat: 'dd/mm/yy',
buttonImage: 'images/calendar.gif',
buttonImageOnly: true
}).focus();

This destroys the previous widget and re-creates based on current data, removeClass() doesn't clear out everything associated with the date picker, just one attribute it applies...this will clear the widget completely.