Limita la data in jquery datepicker in base a un altro datepicker o casella di testo

Ho due caselle di testo con un DatePicker collegato a loro. Le caselle di testo sono per data di inizio e data di fine. Il primo datepicker è configurato in modo che l’utente non possa scegliere una data prima di oggi, ma può scegliere qualsiasi data in futuro.

Come posso impostare il secondo Datepicker in modo che non possa scegliere una data prima della data scelta nel primo selettore di date? Ad esempio: se oggi è il 12/11/10 e scelgo 12/15/10 nel primo datepicker, il secondo selezionatore di date non dovrebbe essere in grado di scegliere nulla prima del 15/12/10.

Ecco cosa ho finora:

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

Ad esempio, in questo codice di esempio, startDatePicker è selezionato come 2010-12-12, l’evento di modifica di startDatePicker imposta il minDate di endDatePicker 2010-12-13. Blocca le celle prima di questa data. Questo è un esempio di ciò che @Victor ha detto … Spero che aiuti … Saluti … 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 }); 

Aggiornare:

L’approccio precedente imposta il minDate solo sul tempo di creazione. Ho usato l’evento onSelect per modificare l’opzione minDate del secondo datepicker in questo modo:

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

la soluzione di Tin Man ha funzionato per me dopo aver aggiunto $ (“# txtEndDate”). datepicker () in basso

 $("#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 

Da un punto di vista della pura interfaccia utente, non dovresti. Se l’utente sceglie il mese sbagliato su entrambi i datepicker e cerca di selezionare il mese corretto, ha una modifica del 50% di essere ostacolato dall’interfaccia utente. Idealmente, si consentirebbe la selezione errata e verrà visualizzato un messaggio di errore utile che dice che la data di fine dovrebbe essere successiva alla data di fine.

Se desideri implementare la tua idea: dai ad ogni datepicker un evento "change" che modifichi le opzioni sull’altro datepicker in modo appropriato.

prova quest’uomo:

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

Usa il metodo ” getDate ” della prima interfaccia utente di datepicker e passa all’opzione minDate del secondo datepicker:

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

Usa questo codice: