2013-07-15 100 views
6

我有一個這樣的Jquery UI日期選擇器。datepicker中的maxDate選項

enter image description here
我只能從datepicker中選擇月份和年份。
代碼: -

$('#datepicker').datepicker({ 
          changeMonth: true, 
          changeYear: true, 
          showButtonPanel: true, 
          dateFormat: 'M yy', 
          maxDate: '0',      
          onClose: function() { 
            var iMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); 
            var iYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); 
            $(this).datepicker('setDate', new Date(iYear, iMonth, 1));        
          }, 
          beforeShow: function(input, inst) { 
            $(inst.dpDiv).addClass('calendar-off');        
          } 
         }); 

如果我設置maxDate: '0'最大的年份和月份,我可以選擇的是當前的月份和當前年份。
我想使用jquery設置最大月份和年份。 對於有日,月,年的一個正常的日期選擇器,首先我刪除此maxDate: '0'代碼,我用下面的代碼來設置最大日期

var maximumDate = '07-15-2013'; 
$("#datepicker").datepicker("option", "maxDate", maximumDate); 

我如何可以設置月份和年份選擇器的最大日期? 上面的代碼在這種情況下不起作用。請給我你的建議。

+0

的maxDate字符串必須是在由dateformat選項中定義的格式。檢查你的dateFormat選項或者使用date對象:'var maximumDate = new Date(2013,7,15);'。 – pipo

+0

@pipo(「#datepicker」).datepicker(「option」,「maxDate」,「7/15/2013」​​);此代碼適用於正常的datepicker.But不適用於月份和年份選擇器。 – Nandu

+0

@pipo我試了很多,因爲你告訴,最後我找到了答案。謝謝pipo – Nandu

回答

5

試過下面的代碼。它對我來說工作的很好。

var date = new Date("2013-07-15"); 
    var currentMonth = date.getMonth(); 
    var currentDate = date.getDate(); 
    var currentYear = date.getFullYear(); 
    $("#datepicker").datepicker("option", "maxDate", new Date(currentYear, currentMonth, currentDate)); 

例撥弄我創建:FIDDLE

3

試試這個選擇最大/最小日期從年月日期選擇器

爲完整的解決方案見本小提琴:Month/Year Picker @ JSFiddle

var searchMinDate = "-2y"; 
var searchMaxDate = "-1m"; 
if ((new Date()).getDate() <= 5) { 
    searchMaxDate = "-2m"; 
} 
$("#txtFrom").datepicker({ 
    dateFormat: "M yy", 
    changeMonth: true, 
    changeYear: true, 
    showButtonPanel: true, 
    showAnim: "", 
    minDate: searchMinDate, 
    maxDate: searchMaxDate, 
    showButtonPanel: true, 
    beforeShow: function (input, inst) { 
     if ((datestr = $("#txtFrom").val()).length > 0) { 
      var year = datestr.substring(datestr.length - 4, datestr.length); 
      var month = jQuery.inArray(datestr.substring(0, datestr.length - 5), "#txtFrom").datepicker('option', 'monthNamesShort')); 
     $("#txtFrom").datepicker('option', 'defaultDate', new Date(year, month, 1)); 
       $("#txtFrom").datepicker('setDate', new Date(year, month, 1)); 
      } 
     }, 
     onClose: function (input, inst) { 
      var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); 
      var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); 
      $("#txtFrom").datepicker('option', 'defaultDate', new Date(year, month, 1)); 
      $("#txtFrom").datepicker('setDate', new Date(year, month, 1)); 
      var to = $("#txtTo").val(); 
      $("#txtTo").datepicker('option', 'minDate', new Date(year, month, 1)); 
      if (to.length > 0) { 
       var toyear = to.substring(to.length - 4, to.length); 
       var tomonth = jQuery.inArray(to.substring(0, to.length - 5), $("#txtTo").datepicker('option', 'monthNamesShort')); 
       $("#txtTo").datepicker('option', 'defaultDate', new Date(toyear, tomonth, 1)); 
       $("#txtTo").datepicker('setDate', new Date(toyear, tomonth, 1)); 
      } 
     } 
    }); 
    $("#txtTo").datepicker({ 
     dateFormat: "M yy", 
     changeMonth: true, 
     changeYear: true, 
     showButtonPanel: true, 
     showAnim: "", 
     minDate: searchMinDate, 
     maxDate: searchMaxDate, 
     showButtonPanel: true, 
     beforeShow: function (input, inst) { 
      if ((datestr = $("#txtTo").val()).length > 0) { 
       var year = datestr.substring(datestr.length - 4, datestr.length); 
       var month = jQuery.inArray(datestr.substring(0, datestr.length - 5), $("#txtTo").datepicker('option', 'monthNamesShort')); 
       $("#txtTo").datepicker('option', 'defaultDate', new Date(year, month, 1)); 
       $("#txtTo").datepicker('setDate', new Date(year, month, 1)); 
      } 
     }, 
     onClose: function (input, inst) { 
      var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); 
      var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); 
      $("#txtTo").datepicker('option', 'defaultDate', new Date(year, month, 1)); 
      $("#txtTo").datepicker('setDate', new Date(year, month, 1)); 
      var from = $("#txtFrom").val(); 
      $("#txtFrom").datepicker('option', 'maxDate', new Date(year, month, 1)); 
      if (from.length > 0) { 
       var fryear = from.substring(from.length - 4, from.length); 
       var frmonth = jQuery.inArray(from.substring(0, from.length - 5), $("#txtFrom").datepicker('option', 'monthNamesShort')); 
       $("#txtFrom").datepicker('option', 'defaultDate', new Date(fryear, frmonth, 1)); 
       $("#txtFrom").datepicker('setDate', new Date(fryear, frmonth, 1)); 
      } 

     } 
    }); 

如上所述同樣在此添加到一個樣式塊:

.ui-datepicker-calendar { display: none !important; } 
相關問題