Créer une sélection d'entrée de date / heure minimaliste avec Flatpickr
L’un des champs les plus difficiles à créer est le date / heure sélectionner. Les développeurs ont souvent recours à de simples menus sélectionnés pour le mois / jour / année ou s’appuient sur différents plugins pour faire le travail..
Certains champs fonctionnent bien, mais ils sont un peu maladroits. Au lieu de cela, vous pouvez égayer votre formulaire avec le Plugin Flatpickr. C'est un sélecteur de calendrier JavaScript gratuit et à code source libre sans aucune dépendance.
C'était conçu avec minimalisme à l'esprit, il peut donc s'intégrer dans n'importe quelle disposition de site Web, n'importe quel formulaire Web, et doit être utilisable à partir de tout appareil moderne.
Une bonne chose à propos de ce plugin est le variété d'options personnalisées. Vous pouvez modifier le style d'affichage des dates dans le champ de texte et indiquer le début du calendrier (paramètres par défaut). “aujourd'hui”).
Mais vous pouvez aussi l'utiliser comme un sélecteur de date si vous n'avez pas besoin de la sélection du temps. C'est simplement une fonctionnalité facultative qui vous permet de transmettre plus de données à travers le formulaire avec ce sélecteur.
Regardez le Exemples page voir Flatpickr en action.
Vous pouvez également définir des options ciblées limiter le comportement du sélecteur de date, tel que:
- Refuser certaines dates / plages
- N'autorisant que certaines dates / plages
- Permettre plusieurs sélections de date
- “Mode de gamme” sélectionner une date de début et de fin
- Juste un sélecteur de date, ou juste l'heure, ou les deux date et heure ensemble
Les options sont pratiquement infinies et elles fonctionnent toutes via ce plugin JavaScript à la vanille..
Les utilisateurs mobiles préfèrent souvent le sélecteur de date natif, mais vous pouvez remplacer ceci avec un paramètre mobile en JavaScript. De cette façon, vous aurez la même interface qui fonctionne sur tous les appareils..
Et vous pouvez même ajouter le support IE9 avec un polyfill ce qui en fait l’un des plugins de sélection de date les plus pris en charge.
L'installation est simple avec commandes pour npm, Bower et Yarn. Ou, vous pouvez télécharger les fichiers source directement à partir de GitHub si vous préférez cette route.
Tout ce que vous devez savoir se trouve sur la page de configuration qui vous montre comment ajouter les fichiers à votre en-tête Et comment appeler ce sélecteur de date sur n'importe quel champ. Facilement l'un des meilleurs plugins de sélecteur de date conçu assez simplement pour s'adapter à n'importe quel design.
