2013-07-15 10 views
6

Mam taki datepicker JQuery UI.Opcja maxDate w datepicker

enter image description here Mogę tylko wybrać miesiąc i rok z datepika.
kod: -

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

Jeżeli ustawić maxDate: '0' maksymalna miesiąc i rok mogę wybrać jest obecny miesiąc i rok bieżący.
Chcę ustawić maksymalny miesiąc i rok za pomocą jquery. Dla normalnego datepicker z dniem, miesiąc, rok, najpierw usunąć ten kod maxDate: '0' i Użyłem poniższy kod, żeby ustawić maksymalną datę

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

Jak mogę ustawić maksymalną datę w miesiąc i rok kompletacji? Powyższy kod nie działa w tym przypadku. Proszę o sugestie.

+0

MaxDate łańcuch musi być w formacie określonym przez opcję dateformat. Sprawdź opcję dateFormat lub użyj obiektu daty: 'var maximumDate = new Date (2013,7,15);'. – pipo

+0

@pipo ("# datepicker") .datepicker ("opcja", "maxDate", "7/15/2013"); ten kod działa poprawnie w przypadku zwykłego datepaksu. Nie jest jednak dostępny w selektorze z miesiąca i roku. – Nandu

+0

@pipo Próbowałem dużo, jak powiedziałeś, W końcu znalazłem odpowiedź. Dzięki Pipo – Nandu

Odpowiedz

5

Wypróbowałem następujący kod. Działa to dobrze dla mnie.

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

Przykład skrzypce I stworzył: FIDDLE

3

Try This wybrać max/min Terminy z miesiąc i rok datepicker.

Zobacz ten skrzypce do pełnego rozwiązania: 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)); 
      } 

     } 
    }); 

dodaj to również do bloku stylu jak wspomniano powyżej:

.ui-datepicker-calendar { display: none !important; } 
Powiązane problemy