2012-09-22 201 views
0

我正在使用jQuery DatePicker UI。我需要仅使用此UI显示月份和年份。 我明白了用下面的代码:JQuery日期选择器仅适用于月份和年份

$(function() { 
     $('.date-picker').datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     showButtonPanel: true, 
     dateFormat: 'yy-mm', 
     onChangeMonthYear: 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)); 

     } 
    }); 
}); 

HTML:

<input type='text' id='date' name='eattdate' class='date-picker' value='".$date."' style='width:105px;'> 

这工作正常,并显示当前月份和年份为default.But我要让月份和年份选择。

回答

0

首先,我相信你缺少日历的隐藏(我猜你想要的,因为你只对付几个月甚至几年,但我可能是错的)。因此,如果这确实是您的意图,请使用:

.ui-datepicker-calendar { 
    display: none; 
} 

在您的CSS文件中。现在

,作为在日期选择器先前选择的日期没有打开,你可以引入一个beforeShow,如下:

$(function() { 
    $('.date-picker').datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     showButtonPanel: true, 
     dateFormat: 'yy-mm', 

     onChangeMonthYear: 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() { 
      var dateText = $(this).val(); 
      var isPopulated = dateText.length > 0; 

      if (isPopulated) { 
       var selectedDate = $.datepicker.parseDate("yy-mm-dd", dateText + "-01"); 

       $(this).datepicker("option", "defaultDate", selectedDate); 
       $(this).datepicker("setDate", selectedDate); 
       $(this).datepicker("refresh"); 
      } 
     } 
    }); 
}); 

我相信这应该得到你想要的东西。

相关问题