Heim > Web-Frontend > js-Tutorial > Hauptteil

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

Patricia Arquette
Freigeben: 2024-09-23 08:30:32
Original
807 Leute haben es durchsucht

Elevate Your Date Selection with DeskyCalendar: A Vanilla JS Solution

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!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!