Datum in jquery datepicker einschränken, das auf einem anderen datepicker oder einer Textbox basiert

Ich habe zwei Textfelder mit einem datepicker, der an sie angeschlossen wird. Die Textfelder sind für Startdatum und Enddatum. Der erste Datepicker ist so eingerichtet, dass der Benutzer kein Datum vor dem heutigen Tag auswählen kann, aber ein Datum in der Zukunft wählen kann.Datum in jquery datepicker einschränken, das auf einem anderen datepicker oder einer Textbox basiert

Wie kann ich den zweiten Datepicker so einrichten, dass er kein Datum vor dem in der ersten Datumsauswahl gewählten Datum auswählen kann? Zum Beispiel: Wenn heute der 12/11/10 ist und ich den 15.12.10 im ersten Datumswahlpunkt auswähle, dann sollte der zweite Datumsauswahler vor dem 15.12.10 nichts mehr auswählen können.

Heres, was ich habe, so weit:

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

Quelle

2010-12-12 The Muffin Man

Zum Beispiel in diesem Beispielcode wird startDatePicker als 2010-12-12 ausgewählt, Änderungsereignis von startDatePicker setzt die minDate von endDatePicker 2010-12-13. Es sperrt die Zellen vor diesem Datum. Dies ist ein Beispiel für was @Victor erwähnt..Ich hoffe es hilft ... Grüße ... 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 
});

Quelle

2010-12-21 01:30:42 user403295

Danke! Auch Ihr Selektor für "endDatePicker" sollte "#endDatePicker" sein – greaterKing

Von einem reinen UI Standpunkt, sollten Sie nicht. Wenn der Benutzer den falschen Monat für beide Datumsauswahl wählt und versucht, den richtigen Monat auszuwählen, hat er eine 50% Änderung von der Benutzeroberfläche beeinträchtigt. Im Idealfall würden Sie die falsche Auswahl zulassen und eine hilfreiche Fehlermeldung anzeigen, dass das Enddatum nach dem Enddatum liegen sollte.

Wenn Sie Ihre Idee umsetzen möchten: Geben Sie jedem Datepicker ein "change" Ereignis, das die Optionen auf dem anderen Datepicker entsprechend ändert.

Quelle

2010-12-12 00:41:18

Sehr guter Punkt, ich war gerade dabei, das gleiche Konzept zu implementieren und erkannte dann, dass ich nur JavaScript verwenden werde, um den Fehler anzuzeigen! Danke Victor! –

Dies ist ein guter Ratschlag, aber wie wäre es, defaultDate stattdessen mit einer Technik einzustellen, die Tin Man ähnlich ist? Das war meine Lösung. –

Verwenden Sie die „getDate“ Verfahren der ersten picker UI und geben es in minDate Option des zweiten Datepicker:

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

Quelle

2010-12-14 17:38:41

Update:

Der Ansatz oben setzen die minDate nur auf die Erstellungszeit. Ich benutzen das onSelect Ereignis die minDate Option des zweiten Datepicker wie folgt zu ändern:

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

Quelle

2010-12-14 18:11:19

Einfachste und nützlichste Art und Weise. – bodi0

Verwendung Dieser Code:

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

Quelle

2013-08-20 09:09:31 Anjyr

versuchen, diesen Mann:

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

Quelle

2016-01-21 23:42:07

die Lösung des Tin Man arbeitete für mich nach $ Zugabe ("# txtEndDate"). datepicker() an der Unterseite

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

Quelle

2016-02-26 08:02:43 aby

Datum in jquery datepicker einschränken, das auf einem anderen datepicker oder einer Textbox basiert

Antwort

Verwandte Themen