Populate date values in selection options for datepicker

Question

I'm going to make this is as none confusing as possible. I have been racking my brain over it for at least a couple of hours. I have a jquery-ui datepicker set up, and I have it rigged so that it only shows the month and year.

I have it set to hide the calendar on show, and the changeMonth , changeYear and showButtonPanel options set to true .

What this causes is an issue where regardless of the value set in the input, it always defaults to the current month and current year. What I would like to know is how do I get it to set the month selector and the year selector, to the current value of the input, if a value exists.

What I do know is that this would have to be done on show, but there isn't an onshow function that can explicitly be called that would also hold the instance of the datepicker. So this is where it gets tricky. If anyone has the answer please let me know! Also I have posted my code below.

javascript

$('.addr-date').datepicker({
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'mm/yy',
    yearRange: '-100:+0',
    onChangeMonthYear : function(year, month, inst){
        // i feel like the solution may like within this function possibly
    },
    onClose: function(dateText, inst) { 
        $(this).val($.datepicker.formatDate('mm/yy', new Date(inst.selectedYear, inst.selectedMonth, 1)));
    }
});
//hide the calender for dates where you only want the month and the year
$('.addr-date').focus(function(){
    $('.ui-datepicker-calendar').hide();
    $.extend($.datepicker,{_checkOffset:function(inst,offset,isFixed){return offset

    //solution proposed by DinoMyte, and it works, but it has triggered the other errors as well
    $('.ui-datepicker-month').val(parseInt($(this).val().split('/')[0] - 1));
    $('.ui-datepicker-year').val(parseInt($(this).val().split('/')[1]));
}});

});

EDITS AND UPDATES

So far one answer has been obtained that accomplishes my initial task, but now a new problem has arisen. While the select lists now populate using the date values that are in the input field, when you go to select a different month or year the values don't change on the select list, however the new value that you selected will appear in the input field. I am currently working on how to override this error as well. Please submit any help that you may have!

I have a feeling like the function onChangeMonthYear might have a purpose here, so I am working with that for the time being.

See http://jsfiddle.net/xno5hb34/6/ for references to this.

I have also edited the above code to reflect these updates. Please review them before answering. Thank you!

Answer 1

Use beforeShow:

$('#timeSpanFrom, #timeSpanTo').datepicker( {
    changeMonth: true,
    changeYear: true,
    showButtonPanel: true,
    dateFormat: 'mm/yy',
    onClose: function(dateText, inst) { 
      var month=$("#ui-datepicker-div .ui-datepicker-month :selected").val();
      var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
      $(this).datepicker('setDate', new Date(year, month, 1));
    },
    beforeShow : function(input, inst) {
      var tmp = $(this).val().split('/');
      $(this).datepicker('option','defaultDate',new Date(tmp[1],tmp[0]-1,1));
      $(this).datepicker('setDate', new Date(tmp[1], tmp[0]-1, 1));
    }
});

http://jsfiddle.net/xno5hb34/38/

Answer 2

Try to set the values of the month and year select lists:

// update focus function to look like so
$('.addr-date').focus(function(){
    $('.ui-datepicker-calendar').hide();
    $.extend($.datepicker,{_checkOffset:function(inst,offset,isFixed){return offset}});
    $('.ui-datepicker-month').val(parseInt($(this).val().split('/')[0] - 1));
    $('.ui-datepicker-year').val(parseInt($(this).val().split('/')[1]));
});

Example: http://jsfiddle.net/xno5hb34/4/