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:

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

Minimale Beispiele

Zwei Spalten

Einfach auf eine doppelte Datumsauswahl umstellen:

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

Termine deaktivieren

Möchten Sie Termine einschränken? Fügen Sie einfach

hinzu

const d = neues Datum();
new DeskyCalendar({'calendar_date_selector2': {disableBefore: d}});
Abschluss

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

","image":"http://www.luping.net/uploads/20241009/17284428126705f1bc90a10.jpg","datePublished":"2024-11-03T20:05:55+08:00","dateModified":"2024-11-03T20:05:55+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
„Wenn ein Arbeiter seine Arbeit gut machen will, muss er zuerst seine Werkzeuge schärfen.“ – Konfuzius, „Die Gespräche des Konfuzius. Lu Linggong“
Titelseite > Programmierung > Erweitern Sie Ihre Datumsauswahl mit DeskyCalendar: Eine Vanilla JS-Lösung

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

Veröffentlicht am 03.11.2024
Durchsuche:979

Elevate Your Date Selection with DeskyCalendar: A Vanilla JS Solution

Möchten Sie Ihre Formulare verschönern, ohne sie aufzupeppen? Lernen Sie DeskyCalendar kennen, einen minimalistischen, reaktionsfähigen 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: Auswahl für vergangene oder zukünftige Daten verhindern und alles unter Kontrolle halten.
? Externe Funktion bei Klick ausführen: Möchten Sie eine benutzerdefinierte Aktion auslösen, wenn ein Datum ausgewählt wird? Kinderleicht!
Schnelleinrichtung

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:

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

Minimale Beispiele

Zwei Spalten

Einfach auf eine doppelte Datumsauswahl umstellen:

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

Termine deaktivieren

Möchten Sie Termine einschränken? Fügen Sie einfach

hinzu

const d = neues Datum();
new DeskyCalendar({'calendar_date_selector2': {disableBefore: d}});
Abschluss

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

Freigabeerklärung Dieser Artikel ist reproduziert unter: https://dev.to/daniele_rugginenti_fecc8b/elevate-your-date-selection-with-deskycalendar-a-vanilla-js-solution-50h4?1, wenn es einen Verstoß gibt, bitte kontaktieren Sie [email protected], um es zu löschen.
Neuestes Tutorial Mehr>

Haftungsausschluss: Alle bereitgestellten Ressourcen stammen teilweise aus dem Internet. Wenn eine Verletzung Ihres Urheberrechts oder anderer Rechte und Interessen vorliegt, erläutern Sie bitte die detaillierten Gründe und legen Sie einen Nachweis des Urheberrechts oder Ihrer Rechte und Interessen vor und senden Sie ihn dann an die E-Mail-Adresse: [email protected] Wir werden die Angelegenheit so schnell wie möglich für Sie erledigen.

Copyright© 2022 湘ICP备2022001581号-3