jQuery UI DatePicker для выбора месяца и года не работает

Question

Я использую jquery datepicker как monthpicker, и он работает, но единственная проблема заключается в том, что я выбираю один месяц из calander, тогда он показывает этот месяц в поле ввода, но когда i нажмите на это поле ввода снова, тогда он не отображает выбранный месяц, но показывает текущий месяц.

HTML

<label for="startDate">Date :</label> 
<input name="startDate" id="startDate" class="date-picker" /> 

JS

$(function() { 
    $('.date-picker').datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     showButtonPanel: true, 
     dateFormat: 'MM yy', 
     onClose: function(dateText, inst) { 



      function isDonePressed(){ 
          return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1); 
         } 

         if (isDonePressed()){ 

          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)); 
          console.log('Done is pressed') 

         } 



     } 
    }); 
}); 

Вот скрипку на мой вопрос. http://jsfiddle.net/DBpJe/5103/

Answer 1

Вы должны изменить beforeShow, как показано ниже, а также начиная с месяца имена находятся в String, вы должны иметь массив, как это сопоставить месяц с номером

var monthNames = ["January", "February", "March", "April", "May", "June", 
    "July", "August", "September", "October", "November", "December" 
]; 
beforeShow: function(input, inst) { 
    inst.dpDiv.addClass('month_year_datepicker') 
    if ((datestr = $(this).val()).length > 0) { 
    datestr = datestr.split(" "); 
    year = datestr[1]; 
    month = monthNames.indexOf(datestr[0]); 
    $(this).datepicker('option', 'defaultDate', new Date(year, month, 1)); 
    $(this).datepicker('setDate', new Date(year, month, 1)); 
    $(".ui-datepicker-calendar").hide(); 
    } 
} 

Вот demo 1

Или вы можете использовать этот метод намного лучше выглядит преобразовать месяц номер

function getMonthFromString(mon){ 
    return new Date(Date.parse(mon +" 1, 2012")).getMonth()+1 
} 

Предоставлено: SO answer

Вот demo 2

Answer 2

Существует способ сделать это, установив CurrentDate в DateTimePicker

$("#datepicker").datepicker("setDate", currentDate); 

Вот рабочий пример JQFAQ Topic.

Answer 3

Попробуйте нравится, что

$('#startDate').datepicker({ 
    dateFormat: 'mm/yy' 
}); 

Edit: Я видел теперь, что вы сказали. То же самое происходит с этим^

Answer 4

Добавлена ​​новая функция, а также: ограничьте на сегодняшний день позже, чем с даты,

<script type="text/javascript"> 
     $(function() { 
    $("#from, #to").datepicker(
        { 
         dateFormat: "yy/mm", 
         changeMonth: true, 
         changeYear: true, 
         showButtonPanel: true, 
         showOn: "button", 
         buttonImage: "../../static/calendar.gif", 
         buttonImageOnly: true, 
         //buttonText: "Select date", 
         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)); 

          function isDonePressed(){ 
           return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1); 
          } 

          if (isDonePressed()){ 
           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)).trigger('change'); 

           $('.from').focusout()//Added to remove focus from datepicker input box on selecting date 
          } 
         }, 

         beforeShow : function(input, inst) { 

          inst.dpDiv.addClass('month_year_datepicker') 

       if ((datestr = $(this).val()).length > 0) { 
        year = datestr.substring(datestr.length-4, datestr.length); 
        month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNames')); 
        $(this).datepicker('option', 'defaultDate', new Date(year, month, 1)); 
        $(this).datepicker('setDate', new Date(year, month, 1));  
       } 
       var other = this.id == "from" ? "#to" : "#from"; 
       var option = this.id == "from" ? "maxDate" : "minDate";   
       if ((selectedDate = $(other).val()).length > 0) { 
        year = selectedDate.substring(selectedDate.length-4, selectedDate.length); 
        month = jQuery.inArray(selectedDate.substring(0, selectedDate.length-5), $(this).datepicker('option', 'monthNames')); 
        $(this).datepicker("option", option, new Date(year, month, 1)); 
       } 
      } 
     }); 
     $("#btnShow").click(function(){ 
     if ($("#from").val().length == 0 || $("#to").val().length == 0){ 
      alert('All fields are required'); 
     } 
     else{ 
      alert('Selected Month Range :'+ $("#from").val() + ' to ' + $("#to").val()); 
      } 
     }), 

     <!--reset--> 
     $(".reset").click(function() { 
      $(this).closest('form')[0].reset() 
     }); 

}); 


     </script>