Minimalistische Datetime-Eingabe erstellen Wählen Sie mit Flatpickr
Eines der am schwierigsten zu erstellenden Felder ist das Datum / Uhrzeit auswählen. Entwickler greifen häufig auf einfache Auswahlmenüs für den Monat / Tag / Jahr zurück oder verlassen sich bei der Arbeit auf verschiedene Plugins.
Ausgewählte Felder funktionieren gut, sind aber etwas klobig. Stattdessen können Sie Ihre Form mit der Flatpickr-Plugin. Es ist ein Kostenlose, Open-Source-JavaScript-Kalenderauswahl mit null Abhängigkeiten.
Es war entworfen für minimalismus, So kann es in jedes Website-Layout und jedes Webformular passen und sollte von jedem modernen Gerät aus verwendet werden können.
Eine nette Sache über dieses Plugin ist das Vielzahl von benutzerdefinierten Optionen. Sie können die Darstellung der Datumsangaben im Textfeld und den Beginn des Kalenders neu festlegen (Standardeinstellung ist) “heute”).
Aber du kannst es auch Verwenden Sie es ausschließlich als Datumsauswahl wenn Sie keine Zeitauswahl benötigen. Es handelt sich lediglich um eine optionale Funktion, mit der Sie mit diesem einen Picker mehr Daten durch das Formular übergeben können.
Schauen Sie sich das an Beispiele Seite um Flatpickr in Aktion zu sehen.
Du kannst auch zielgerichtete Optionen einstellen um das Verhalten des Datumsauswahlers einzuschränken, z.
- Bestimmte Termine / Bereiche nicht zulassen
- Nur bestimmte Daten / Bereiche zulassen
- Mehrere Datumsauswahl zulassen
- “Bereichsmodus” um ein Start- und Enddatum auszuwählen
- Nur eine Datumsauswahl oder nur Zeit oder Datum und Uhrzeit zusammen
Die Optionen sind praktisch unbegrenzt und sie funktionieren alle mit diesem JavaScript-Plugin von Vanilla.
Mobile Benutzer bevorzugen oft die native Datumsauswahl, aber Sie können dies Überschreiben Sie dies mit einer mobilen Einstellung in JavaScript. Auf diese Weise haben Sie die gleiche Schnittstelle für alle Geräte.
Und du kannst sogar Fügen Sie IE9-Unterstützung mit einer Polyfill hinzu Dies macht dieses Plugin zu einem der am besten unterstützten Datumsauswahl-Plugins.
Die Installation ist einfach mit Befehle für npm, Bower und Yarn. Oder Sie können die Quelldateien herunterladen direkt von GitHub wenn Sie diese Route bevorzugen.
Alles, was Sie wissen müssen, finden Sie auf der Setup-Seite, die Sie zeigt wie Sie die Dateien zu Ihrem Header hinzufügen & So rufen Sie diese Datumsauswahl in einem beliebigen Feld auf. Einfach eines der besten Datumsauswahl-Plugins, das einfach genug entworfen wurde, um in jedes Design zu passen.
