Datepicker helfen Benutzern, ein Datum über einen Kalender auszuwählen. Dies vermeidet Fehler, die fast immer durch eine schlechte Datumseingabe verursacht werden, wie eine schlechte Formatierung. Mit dem jQuery-Plugin können Sie ganz einfach einen Datepicker zu einem Eingabefeld hinzufügen. Es gibt viele Datepicker-Plugins, aber jQuery UI Datepicker ist eines der besten, da es viele Anpassungsoptionen bietet.
In diesem Tutorial zeigen wir Ihnen, wie Sie mit jQuery einen Datepicker zu einem Eingabefeld hinzufügen. Mit diesem Datepicker wird jedes Mal, wenn auf ein bestimmtes Eingabefeld geklickt wird, ein Kalender geöffnet. Der Benutzer kann aus diesem Kalender ein Datum (Tag, Monat und Jahr) auswählen.
Jquery UI
Zunächst müssen wir die jQuery UI-Bibliothek einschließen, um ihre Funktionen nutzen zu können.
Grundlegende Datepicker-Funktionalität
In diesem Beispiel zeige ich Ihnen, wie Sie einen Datepicker zu einem Eingabefeld hinzufügen.
Javascript-Code
Wir müssen die ID des Eingabefelds als Datepicker-Selektor angeben.
$(function(){ $("#datepicker").datepicker();});
HTML code
Wenn Sie sich auf das Eingabefeld konzentrieren, wird ein interaktiver Kalender geöffnet.
<p>Date: <input type="text"></p>
Erweiterte Funktionalität des Datepickers
In den folgenden Zeilen werden wir sehen, wie wir den Datepicker durch die verschiedenen Optionen, die er uns bietet, weiter nutzen können.
Datumsformat ändern
Standardmäßig verwendet das Plugin das Format MM/TT / JJJJ. Mit der Option DateFormat können wir das Datumsformat nach unseren Bedürfnissen ändern.
$(function(){ $("#datepicker").datepicker({ dateFormat: "dd-mm-yy" });});
Monat und Jahr auswählen
Standardmäßig ändern wir Monat und Jahr mit den Pfeilen nach links und rechts. Mit den Optionen changeMonth und changeYear können wir ein Menü anzeigen, in dem Monat und Jahr ausgewählt werden können.
$(function(){ $("#datepicker").datepicker({ changeMonth: true, changeYear: true });});
Datumsbereich einschränken
Mit Datepicker können Sie ein beliebiges Datum auswählen, aber wenn Sie dies einschränken möchten, können Sie die Optionen minDate und maxDate verwenden.
$(function(){ $("#datepicker").datepicker({ minDate: 0, maxDate: "+1M +5D" });});
Datepicker from to
Im folgenden Beispiel zeige ich Ihnen, wie Sie einen Datepicker implementieren, in den der Benutzer ein Datum von und ein Datum bis eingeben muss. Die Krume dieses Skripts ist, dass das Datum zu, kann niemals früher als das Datum von sein.
HTML-Code
Der Benutzer kann im Feld Von ein beliebiges Datum auswählen, aber nur eines, das dem vorherigen Wert im Feld An entspricht oder größer ist.
<p>Date: <input type="text"> TO <input type="text"></p>