Opret Minimalistisk Datetime Input Vælg med Flatpickr
Et af de vanskeligste felter at skabe er dato / klokkeslæt vælg. Udviklere ofte ty til simple vælg menuer for måneden / dag / år eller stole på forskellige plugins til at gøre jobbet.
Vælg felter fungerer fint, men de er lidt klumpede. I stedet kan du jazz op din form med Flatpickr plugin. Det er en gratis, open source-JavaScript-kalendervælger med nulafhængigheder.
Det var designet med minimalisme i tankerne, så det kan passe ind i ethvert webstedslayout, enhver webformular, og skal kunne bruges fra enhver moderne enhed.
En god ting ved dette plugin er forskellige brugerdefinerede valgmuligheder. Du kan restylle, hvordan datoerne vises i tekstfeltet, og hvor kalenderen starter (standardindstillingerne “i dag”).
Men det kan du også brug det som strengt en date picker hvis du ikke har brug for tidsvalg. Det er kun en valgfri funktion, som giver dig mulighed for at videregive flere data via formularen med denne en picker.
Tag et kig på Eksempler side at se Flatpickr i aktion.
Du kan også indstil målrettede muligheder at begrænse date pickerens adfærd, såsom:
- Tillader bestemte datoer / intervaller
- Tillader kun bestemte datoer / intervaller
- Tillader flere datovalg
- “Range mode” for at vælge en start- og slutdato
- Bare en date picker, eller bare tid, eller både dato og tid sammen
Indstillingerne er næsten uendelige, og de arbejder alle sammen gennem denne one vanilla JavaScript plugin.
Mobile brugere foretrækker ofte den native date picker, men du kan tilsidesætte dette med en mobilindstilling i JavaScript. På denne måde har du samme grænseflade, der fungerer på tværs af alle enheder.
Og du kan endda Tilføj IE9 support med en polyfill hvilket gør dette til en af de mest velunderbyggede date picker plugins derude.
Installation er simpel med kommandoer til npm, Bower og Garn. Eller du kan downloade kildefilerne direkte fra GitHub hvis du foretrækker den rute.
Alt du behøver at vide kan findes på opsætningssiden, som viser dig hvordan man tilføjer filerne til dit overskrift & hvordan man kalder denne datovælger på et hvilket som helst felt. Nemt en af de bedste date picker plugins designet simpelt nok til at passe til ethvert design.
