Keep inline full year datepicker calendar from moving when selecting a date

Question

I am using the method outlined in jQuery UI - Custom widget - Datepicker to Whole Year Calendar to display a full year calendar. Whenever I click on a date the calendar then scrolls to show the month of the clicked on date at position 0. I want the calendar to stay where it is whenever I select dates. I have tried the following, to no avail, to keep the calendar from moving:

1. Updating showCurrentAtPos to the selected month in the onChangeMonthYear handler.
2. Changing showCurrentAtPos in the onSelect handler.
3. Setting the actual date to the first of the current year in the onSelect handler.

Option 1 does not work since the onChangeMonthYear is only called when previous and next links are clicked to change the month and not when selecting dates.

Option 2 seems to be setting the value before the calendar is re-rendered.

Option 3 fails for the same reason as Option 2.

Answer 1

So far the only solution I can find is to execute the following bit of code at the end of the onSelect handler:

var parts = dateText.split('-');
setTimeout(function() {
    // This timeout keeps the calendar from moving around and shifting
    // the first month from january to the currently selecte month.
    // For some reason it keeps the red date as the intended one.
        $weeklycalendar.datepicker('setDate', parts[0]+'-01-01');
}, 0);

This is obviously a brittle solution since it depends on a race condition and on timing. If the timeout function is fired too quickly it will break if it fires too late it will cause a visual jump.

Answer 2

Try the following:

1. Get the selected text via the onSelect event (like you do already).
2. Use the beforeShow event to set the date to the beginning of year.

This way, every time you click the datepicker is displayed, and starts at Jan 1st. Disadvantage: once you click the date picker, the previously selected value gets overwritten.

Something like the code below:

$( "#datepicker" ).datepicker({
        numberOfMonths: 12,
        defaultDate: "01/01/12",
        onSelect: function(dateText,inst) {
            console.log("This is currently selected date: " + dateText);

        },
        beforeShow: function(input, inst) { 
            $( "#datepicker" ).datepicker( "setDate" , "01/01/12" );
         }


    });