年份和月份選擇的jQuery UI DatePicker不起作用

Question

我正在使用jquery datepicker作為monthpicker，它正在工作，但是唯一的問題是，如果我從calander中選擇一個月，那么它將在輸入字段中顯示該月，但是當我再次單擊該輸入字段時，它將不顯示所選的月份。但它顯示了當前月份。

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();
  }
}

這是演示1

或者您可以使用這種看起來更好的方法將月份轉換為數字

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

禮貌：如此回答

這是演示2

Answer 2

還添加了一個新功能：限制截止日期晚於起始日期，

 <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>

Answer 3

有一種方法可以通過將currentdate設置為datetimepicker

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

這是工作示例JQFAQ主題 。

Answer 4

這樣嘗試

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

編輯：我現在看到了你說的話。 ^也是如此