2013-07-15 2 views
6

이처럼 Jquery UI datepicker가 있습니다.datepicker의 maxDate 옵션

enter image description here
날짜 표시기에서 월과 연도 만 선택할 수 있습니다.
코드 : -

$('#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 당신이 말한대로 많이 시도했습니다. 마침내 대답을 찾았습니다. 감사합니다. – 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

최대 선택이 시도/분 월 및 연도의 날짜 선택기에서 거슬러 올라간다.

전체 솔루션이 바이올린을 참조하십시오 : 위에서 언급 한 바와 같이

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

     } 
    }); 

Month/Year Picker @ JSFiddle는 또한 스타일 블록이 추가

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