Crea immissione data / ora minimalista Seleziona con Flatpickr
Uno dei campi più difficili da creare è il selezione data / ora. Gli sviluppatori spesso ricorrono a semplici menu di selezione per il mese / giorno / anno o si basano su vari plugin per fare il lavoro.
Selezionare i campi funzionano bene ma sono un po 'goffo. Invece, puoi ravvivare il tuo modulo con Plugin Flatpickr. È un Selettore di calendario JavaScript gratuito, open source con dipendenze zero.
Era progettato pensando al minimalismo, quindi può adattarsi a qualsiasi layout del sito Web, a qualsiasi modulo Web e deve essere utilizzabile da qualsiasi dispositivo moderno.
Una cosa bella di questo plugin è il varietà di opzioni personalizzate. È possibile eseguire il restyling di come appaiono le date nel campo di testo e in cui inizia il calendario (predefinito su “oggi”).
Ma puoi anche usalo come un vero e proprio raccoglitore di date se non hai bisogno della selezione del tempo. È semplicemente una funzione opzionale che ti consente di passare più dati attraverso il modulo con questo unico selettore.
Dai un'occhiata al Pagina degli esempi per vedere Flatpickr in azione.
Puoi anche imposta le opzioni mirate per limitare il comportamento del selettore di date, come ad esempio:
- Disabilitazione di determinate date / intervalli
- Solo permettendo determinate date / intervalli
- Consentire selezioni di date multiple
- “Modalità intervallo” per selezionare una data di inizio e fine
- Solo un selezionatore di date, o solo il tempo, o entrambe le date e l'ora insieme
Le opzioni sono praticamente infinite e tutti funzionano attraverso questo plug-in di una vaniglia JavaScript.
Gli utenti mobili spesso preferiscono il selettore di date nativo, ma è possibile sostituisci questo con un'impostazione mobile in JavaScript. In questo modo avrai la stessa interfaccia funzionante su tutti i dispositivi.
E puoi persino aggiungi il supporto IE9 con un polyfill che rende questo uno dei plugin di selezione data più ben supportati là fuori.
L'installazione è semplice con comandi per npm, Bower e Yarn. Oppure puoi scaricare i file sorgente direttamente da GitHub se preferisci quella via.
Tutto quello che devi sapere può essere trovato nella pagina di configurazione che ti mostra come aggiungere i file alla tua intestazione & come chiamare questo selettore di date su qualsiasi campo. Facilmente uno dei migliori plugin di selezione data progettato semplicemente per adattarsi a qualsiasi progetto.
