Jquery – How to set date of datepicker that displays Month and Year only

datepickerjqueryjquery-ui

I'm trying to display a datepicker that shows only month + year menu like in this Q' jquery date picker to show month year only , this is not a problem, but I'm having issue with the following

I want the input text to be loaded with string value of date , like 01/2011 and I want that on focusin event the datepicker will be loaded with the shown date , i mean i want it to be opened with year 2011 and month 01 already selected,

But for some reason when i click on the text input the original date "01/2011" changes into "01/01/2011"

here is my code

            $(document).delegate("#timeSpanFrom, #timeSpanTo", "focusin", function() {
            var $this = $(this);
            var inputDate = $.datepicker.parseDate('dd/mm/yy', "01/"+$this.val());
            if (!$this.data('datepicker_enabled')) {
                $this.datepicker({
                    changeMonth : true,
                    changeYear : true,
                    showButtonPanel : true,
                    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));
                        $(".ui-datepicker-calendar").hide();
                    }
                });
                $this.datepicker({ dateFormat: 'mm/yy' }); 
                $this.datepicker('setDate', inputDate);
                $this.data('datepicker_enabled',true);
            }
        }); 

        $(document).delegate("#timeSpanFrom, #timeSpanTo", "focus", function() {
            $(".ui-datepicker-calendar").hide();
        });

Thanks ahead

Best Answer

<style>
 .ui-datepicker-calendar {
  display: none;
 }
</style>
<script>
  $(document).ready(function(){
    $('#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));
        }
    });
});
</script>

Here a more general solution jsfiddle

Related Topic