jQuery datepicker changing format dosent show proper month

Question

I am using jQuery datepicker for selecting date. But I need the date to be displayed like "April 2012". To achieve this I added the following option to the datepicker code

$(function() {
    $('#a').datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy',
    });
});

After doing this, lets say I select "1st Jan, 2012" as date in the date-picker. But when I click the date-picker again, the UI calendar still shows the current(today) month and year and not the date previously selected.

You can see the full code here http://jsfiddle.net/kGzXR/1/

Can you please let me know if I am missing something here.

Answer 1

If you only need to month and year (since thats what you are storing on the input) you can use this:

$(function() { 
//set datepicker or month/year selection
        $('#a').datepicker( {
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            dateFormat: 'MM yy'
        }); 

        $("#a").focus(function () {
            $(".ui-datepicker-calendar").hide();
            //add event to perform on done button click
            $(".ui-datepicker-close").click(function(){
                var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                $("#a").datepicker('option', 'defaultDate', new Date(year, month, 1));
            $("#a").datepicker('setDate', new Date(year, month, 1));
            });
        });   

});  

check the demo

Answer 2

If Date highlight is your problem, then you can remove it by using the below css:

.ui-datepicker-today a.ui-state-highlight {
    border-color: #d3d3d3;
    background: #e6e6e6 url(/themeroller/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;;
    color: #555555;    
}

JSFiddle.