Maybaygiare.org

Blog Network

Hinzufügen eines Datepickers zu einem Eingabefeld mit jQuery UI

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>

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.