Opprett Minimalistisk Datetime Input Velg med Flatpickr
Et av de vanskeligste feltene å lage er dato / klokkeslett velg. Utviklere ofte ty til enkle velg menyer for måneden / dag / år eller stole på ulike plugins for å gjøre jobben.
Velg felt fungerer fint, men de er litt clunky. I stedet kan du jazz opp skjemaet ditt med Flatpickr plugin. Det er en gratis, åpen kildekode-JavaScript-kalenderen med null avhengigheter.
Det var designet med minimalisme i tankene, slik at den kan passe inn i et hvilket som helst nettstedslayout, hvilket som helst nettform, og skal være brukbart fra en hvilken som helst moderne enhet.
En fin ting om dette pluginet er en rekke tilpassede alternativer. Du kan restylle hvordan datoene vises i tekstfeltet og hvor kalenderen starter (som standard på “i dag”).
Men det kan du også bruk den som strengt en date picker hvis du ikke har behov for tidsvalg. Det er bare en valgfri funksjon som lar deg overføre flere data via skjemaet med denne en plukkeren.
Ta en titt på Eksempler side for å se Flatpickr i aksjon.
Du kan også sett målrettede alternativer for å begrense dataplukkers adferd, for eksempel:
- Tillater bestemte datoer / intervaller
- Tillater bare bestemte datoer / intervaller
- Tillater flere datovalg
- “Range modus” å velge start- og sluttdato
- Bare en date picker, eller bare tid, eller både dato og tid sammen
Alternativene er praktisk talt uendelige, og de fungerer alle sammen gjennom denne vaniljens JavaScript-plugin.
Mobilbrukere foretrekker ofte den innfødte dataplukkeren, men du kan Overstyr dette med en mobilinnstilling i JavaScript. På den måten har du samme grensesnitt som fungerer på alle enheter.
Og du kan til og med legg til IE9-støtte med en polyfill noe som gjør dette til en av de mest godt støttede datautvalgspluggene der ute.
Installasjonen er enkel med kommandoer for npm, Bower og Garn. Eller du kan laste ned kildefilene direkte fra GitHub hvis du foretrekker den ruten.
Alt du trenger å vite, finner du på oppsettsiden som viser deg hvordan legge til filene i overskriften din & hvordan å ringe denne datovelgeren på et hvilket som helst felt. Enkelt en av de beste dataplukkere som er designet ganske enkelt for å passe med ethvert design.
