jQuery UI datepicker prev/next broken

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.

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
});

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.

This problem also occurs if you load a datepicker input inside a jQuery UI dialog. If the datepicker enabled input is the first inside the dialog, UI's automatic setting of focus will cause the input to be displayed on document ready, overriding the showOn option. It seems that this happens before the datepicker is fully ready and hence this problem can occur.

So the solution is to avoid the relevant input getting focus too early. By placing another focus-susceptible element before it in the DOM, jQuery UI will trigger focus on that element instead. There may well be a prettier way to do it, but this at least works.