Der JavaScript "DatePicker" Ermöglicht Ihnen, ein Datum aus einem interaktiven Dropdown-Kalender auszuwählen, anstatt es manuell zu tippen. Es wird in Szenarien verwendet, in denen Sie Aufgaben nach einem bestimmten Datum planen möchten, z. B. das Speichern eines Geburtsdatums. A "Datumsauswahl"Kann schnell zu einem hinzugefügt werden"Eingabefeld" Verwendung der "JQuery Plugin“. Es gibt auch verschiedene andere DatePicker -Plugins; Jedoch, "JQuery UI DatePicker”Fällt auf dem Markt aufgrund seiner hochflexiblen Natur auf dem Markt.

In diesem Beitrag wird das Verfahren zur Verwendung a erörtert JavaScript DatePicker. So lass uns anfangen!

JQueryui DatePicker Plugin

Die jQueryui “DatumsauswahlMit Plugin können der Benutzer die Daten visuell eingeben. Sie können auch das Datumsformat und seine Sprache einfach ändern, Navigationsoptionen hinzufügen und die Datumsbereiche einschränken. Um all diese Funktionen zu nutzen, bietet Jqueryui eine “Datumsauswahl()Methode und fügt HTML -Seiten neue CSS -Klassen hinzu, indem Sie ihr Aussehen ändern.

Syntax

$ (Selektor).DatePicker (Optionen);

Hier das "Wähler"Parameter repräsentiert die CSS -Selektoren wie"div”Oder ein Dokumentobjektmodellknoten und“OptionenIst ein optionaler Parameter, der verschiedene Optionen umfasst wie z "DateFormat", "Closetext", "Daynames".

Gehen wir nun auf die Implementierung von JavaScript “Datumsauswahl”.

So verwenden Sie JavaScript DatePicker

Für den Demonstrationszweck erstellen wir eine JavaScript -Anwendung und fügen die Funktionalität eines Basic hinzuDatumsauswahl" zu einem Eingabefeld. Befolgen Sie die angegebenen Schritt-für-Schritt-Anweisungen:

Schritt 1: Importierende Bibliotheken importieren

Importieren Sie zunächst die erforderlichen Bibliotheken in die HTML -Datei für die Verwendung von JQuery UI -Plugin:

Schritt 2: HTML -Elemente hinzufügen

Erstellen Sie im nächsten Schritt die gewünschten HTML -Elemente in Ihrer Anwendung. In unserem Fall werden wir zunächst eine hinzufügen "Titel" innerhalb des "" -Tags ":

Dann eine Überschrift mit dem “

Tag und ein Absatz mit dem “

"Tag, im Inneren der"" Schild:

Demonstration der Verwendung von JavaScript DatePicker

Datum eingeben:

Auch im hinzugefügten “Eingabefeld”, Ein interaktiver Kalender erscheint in einem Overlay, wenn sich das Eingangsfeld konzentriert.

Schritt 3: JavaScript -Dateicode

Wechseln Sie zu Ihrer JavaScript -Datei und schreiben Sie den folgenden Code auf, um die Eingabefeld -ID anzugeben#Datumsauswahl" als "Wähler"Parameter der"Datumsauswahl()" Methode. Hier können Sie auch einige erweiterte Konfigurationsoptionen hinzufügen, die sich auf JavaScript beziehenDatumsauswahl”Wie das Datumsformat zu ändern:

$ (function ()
$ ("#DatePicker").Datumsauswahl();
DateFormat: "YY-MM-DD"
);

Schritt 4: CSS -Dateicode

Um das Erscheinungsbild der JavaScript -Anwendung zu verbessern, definieren Sie den Stil der zusätzlichen HTML -Elemente in der CSS -Datei. Zum Beispiel werden wir die Hintergrundfarbe für “hinzufügen“Körper„, Textfarbe und Schriftfamilie für die "H1" Überschrift und "P" Absatzelemente:

Körper
Hintergrundfarbe: Powderblue;

H1
Farbe: RGB (21, 7, 145);
Schriftfamilie: "Kurier neu", Kurier, Monospace;

P
Farbe: RGB (37, 25, 5);
Schriftfamilie: Kurier;

Schritt 5: Verknüpfen Sie CSS und JavaScript mit der HTML -Datei

Verknüpfen Sie zuletzt die CSS- und JavaScript -Dateien mit der HTML -Datei JavaScript Project:

So ist unsere ““JavaScript DatePicker.html”Datei sieht aus:

Schritt 6: JavaScript -Anwendung ausführen

Nach dem Hinzufügen des erforderlichen Code klicken Sie mit der rechten Maustaste auf die HTML-Datei und wählen Sie aus dem geöffneten Kontextmenü die "die"Öffnen Sie mit Live -Server" Möglichkeit:

Ihre erstellte JavaScript -Anwendung wird nun im Browser ausgeführt. Klick auf das "Eingabefeld"Und wählen Sie ein Datum aus dem"Datumsauswahl”:

Wir haben Ihnen die Methode gezeigt, um eine Basic zu verwenden JavaScript DatePicker. Sie können nach Bedarf weiter erkunden.

Abschluss

Jqueryui bietet eine “Datumsauswahl()Methode, mit der Sie ein Datum aus einem interaktiven Dropdown-Kalender auswählen können, anstatt es manuell zu tippen. Ein JavaScript -DatePicker wird in Szenarien verwendet, in denen Sie Aufgaben nach einem bestimmten Datum planen möchten, z. B. das Speichern eines Geburtsdatums. In diesem Beitrag haben wir die Methode erörtert, um die Funktionalität eines Basic hinzuzufügenDatumsauswahl”Zu einem Eingangsfeld.