Erweitern Sie Ihre Datumsauswahl mit DeskyCalendar: Eine Vanilla JS-Lösung

Möchten Sie Ihre Formulare ohne Fussel verschönern? Lernen Sie DeskyCalendar kennen, einen minimalistischen, reaktionsschnellen Datumswähler, der in reinem Vanilla-JavaScript erstellt wurde. Es wurde entwickelt, um Ihrem Datumsauswahlprozess Stil und Funktionalität zu verleihen, ohne Ihr Projekt zu belasten.

Demo- und Projektseite

Demoseite -> https://danruggi.github.io/datepicker/
Projektlink -> https://github.com/danruggi/datepicker

Hauptmerkmale

? Vollständig reaktionsfähig: Sieht auf jedem Gerät großartig aus – keine zerquetschten Kalender mehr.
? Doppel-/Einzelformat: Wählen Sie ganz einfach zwischen der Auswahl eines einzelnen Datums oder eines Bereichs.
? Option „Beliebiges Datum“ hinzufügen: Geben Sie Benutzern die Freiheit, ein beliebiges Datum auszuwählen, ideal für Filter und Berichte.
? Daten deaktivieren: Verhindern Sie die Auswahl vergangener oder zukünftiger Daten und behalten Sie so alles unter Kontrolle.
? Externe Funktion bei Klick ausführen: Möchten Sie eine benutzerdefinierte Aktion auslösen, wenn ein Datum ausgewählt wird? Kinderleicht!
Schnelle Einrichtung

1. Binden Sie CSS und JS ein

Fügen Sie diese Links einfach in Ihren HTML-Code ein:

2. Fügen Sie Ihre Eingabe hinzu

Erstellen Sie ein Eingabefeld:

3. Initialisieren Sie den Kalender

Richten Sie es mit einer einfachen JavaScript-Zeile ein:

neuer DeskyCalendar({'myID': {}});

Minimale Beispiele

Zwei Spalten

Einfach auf eine doppelte Datumsauswahl umstellen:

neuer DeskyCalendar({'calendar_date_selector1': {mode: "double"}});

Termine deaktivieren

Möchten Sie Termine einschränken? Einfach hinzufügen

const d = new Date();
new DeskyCalendar({'calendar_date_selector2': {disableBefore: d}});
Fazit

Mit nur wenigen Zeilen bringt DeskyCalendar Raffinesse und Einfachheit in Ihre Anforderungen bei der Datumsauswahl und ist dabei leichtgewichtig und effizient. Es ist an der Zeit, Ihre Formulare mit dieser eleganten Lösung aufzuwerten. Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonErweitern Sie Ihre Datumsauswahl mit DeskyCalendar: Eine Vanilla JS-Lösung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!