Skapa Minimalistisk Datetime Input Välj med Flatpickr
Ett av de svåraste fälten att skapa är datum / tid välj. Utvecklare tar ofta till enkla välj menyer för månaden / dagen / året eller förlita sig på olika plugins för att göra jobbet.
Välj fält fungerar bra men de är lite clunky. I stället kan du jazz upp din form med Flatpickr-plugin. Det är en gratis, open-source JavaScript-kalenderväljare med nollberoende.
Det var utformad med minimalism i åtanke, så det kan passa in i alla webbsidor, webbformulär, och ska kunna användas från alla moderna enheter.
En trevlig sak om det här pluginet är olika anpassade alternativ. Du kan återställa hur datumen visas i textfältet och var kalendern startar (standardinställningar på “i dag”).
Men det kan du också använd det som strikt en datumväljare om du inte behöver tidvalet. Det är bara en valfri funktion som låter dig skicka mer data via formuläret med den här plockaren.
Ta en titt på Exempel sida att se Flatpickr i aktion.
Du kan också Ange riktade alternativ för att begränsa datumväljareens beteende, såsom:
- Tillåter vissa datum / intervall
- Endast tillåter vissa datum / intervall
- Tillåter flera datumval
- “Range-läge” för att välja ett start- och slutdatum
- Bara en datumväljare, eller bara tid, eller både datum och tid tillsammans
Alternativen är praktiskt taget oändliga och de arbetar alla genom den här vanilj JavaScript plugin.
Mobila användare föredrar ofta den ursprungliga datumväljaren men du kan åsidosätta detta med en mobil inställning i JavaScript. På det här sättet har du samma gränssnitt som fungerar över alla enheter.
Och du kan även lägg till IE9-stöd med en polyfill vilket gör att detta är en av de mest välskötta datumplockar pluginsna där ute.
Installationen är enkel med kommandon för npm, Bower och Garn. Eller, du kan ladda ner källfilerna direkt från GitHub om du föredrar den vägen.
Allt du behöver veta finns på installationssidan som visar dig hur man lägger till filerna i din rubrik & hur man ringer den här datumväljaren på något fält. Enkelt en av de bästa datumväljare pluginsna utformade helt enkelt för att passa alla stilar.
