Ogranicz datę w datacku jquery w oparciu o inny datepicker lub pole tekstowe.

Question

Mam dwa pola tekstowe z podłączonym datepickerem. Pola tekstowe dotyczą daty rozpoczęcia i zakończenia. Pierwszy datepicker jest skonfigurowany tak, aby użytkownik nie mógł wybrać daty przed dniem dzisiejszym, ale może wybrać dowolną datę w przyszłości.

Jak mogę ustawić drugi datepicker tak, aby nie mógł wybrać daty przed datą wybraną w pierwszym selektorze daty? Na przykład: Jeśli dzisiaj jest 12/11/10 i wybieram 12/15/10 w pierwszym datepicker, to drugi wybór daty nie powinien być w stanie wybrać niczego przed 12/15/10.

Herezje co mam tak daleko:

$("#txtStartDate").datepicker({ minDate: 0 }); 
$("#txtEndDate").datepicker({}); 

Answer 1

Na przykład, w tym przykładowego kodu, startDatePicker jest wybrany 2010-12-12, zmiany zdarzenie startDatePicker ustawia minDate z endDatePicker 2010-12-13. Blokuje komórki przed tą datą. To jest przykład tego, o czym wspomniał @Victor. Mam nadzieję, że to pomoże ... Pozdrawiam ... Ozlem.

$("#startDatePicker").datepicker({ 
    dateFormat: 'yy-mm-dd', 
    changeMonth: true, 
    minDate: new Date(), 
    maxDate: '+2y', 
    onSelect: function(date){ 

     var selectedDate = new Date(date); 
     var msecsInADay = 86400000; 
     var endDate = new Date(selectedDate.getTime() + msecsInADay); 

     //Set Minimum Date of EndDatePicker After Selected Date of StartDatePicker 
     $("#endDatePicker").datepicker("option", "minDate", endDate); 
     $("#endDatePicker").datepicker("option", "maxDate", '+2y'); 

    } 
}); 

$("#endDatePicker").datepicker({ 
    dateFormat: 'yy-mm-dd', 
    changeMonth: true 
}); 

Answer 2

z czystego UI punktu widzenia, nie powinno. Jeśli użytkownik wybierze nieprawidłowy miesiąc na obu datepickerach i spróbuje wybrać prawidłowy miesiąc, ma 50% zmiany w utrudnieniu przez interfejs użytkownika. W idealnej sytuacji pozwolisz na nieprawidłowy wybór i wyświetlisz pomocny komunikat o błędzie informujący, że data końcowa powinna być późniejsza niż data zakończenia.

Jeśli chcesz zaimplementować swój pomysł: nadaj każdemu datepickerowi zdarzenie "change", które odpowiednio zmienia opcje w drugim zbiorze danych.

Answer 3

Użyj „getDate” metodę pierwszego datepicker UI i przekazać go do minDate opcją drugiego datepicker:

$("#txtEndDate").datepicker({ 
    showOn: "both", 
    minDate: $("#txtStartDate").datepicker("getDate") 
}); 

Answer 4

Aktualizacja:

Podejście powyżej ustawić minDate tylko na czas tworzenia. kiedyś onselect zdarzenie zmiany opcji minDate drugiego datepicker tak:

$("#txtStartDate").datepicker({ 
    showOn: "both",  
    onSelect: function(dateText, inst){ 
    $("#txtEndDate").datepicker("option","minDate", 
    $("#txtStartDate").datepicker("getDate")); 
    } 
}); 

Answer 5

użyć tego kodu:

<script type="text/javascript"> 
    $(function() { 
     $("#txtStartDate").datepicker({ 
      dateFormat: 'dd/mm/yy', 
      inline: true, 
      minDate: 'dateToday' 
     }); 
     $("#txtEndDate").datepicker({ 
      dateFormat: 'dd/mm/yy', 
      inline: true, 
      minDate: $("#txtStartDate").datepicker("getDate") }); 
     }); 
</script> 

Answer 6

spróbować tego człowieka:

$("#dateTo").datepicker({ 
    dateFormat: 'dd/mm/yy', 
    changeMonth: true, 
    changeYear: true, 
    minDate: new Date() 
    }).datepicker("setDate", new Date()); 
$("#dateFrom").datepicker({ 
    dateFormat: 'dd/mm/yy', 
    changeMonth: true, 
    changeYear: true, 
    onSelect: function(){ 
     $('#dateTo').datepicker('option', 'minDate', $("#dateFrom").datepicker("getDate")); 
    } 
    }).datepicker("setDate", new Date()); 

Answer 7

rozwiązanie Blaszany człowieka pracował dla mnie po dodaniu $ ("# txtEndDate"). datepicker() na dole

$("#txtStartDate").datepicker({ 
    showOn: "both",  
    onSelect: function(dateText, inst){ 
    $("#txtEndDate").datepicker("option","minDate", 
    $("#txtStartDate").datepicker("getDate")); 
    } 
}); 

$("#txtEndDate").datepicker(); //it is not working with out this line