Champs de saisie de l'heure personnalisés avec jQuery Timedropper
Certains formulaires Web nécessitent entrées basées sur la date et les plugins de sélection de date peuvent vous aider. Mais qu'en est-il entrées de temps?
Avec le plugin gratuit jQuery Timedropper, vous pouvez ajouter sélecteurs de temps personnalisés pour fixer des rendez-vous, programmer des appels téléphoniques ou à peu près tout ce dont vous avez besoin.
C'est incroyablement simple et vous seulement besoin de la bibliothèque jQuery pour commencer. Une fois cette bibliothèque installée, vous pouvez ajouter les fichiers Timedropper JS / CSS et la laisser s'exécuter. C'est tout!
Chaque champ de saisie doit être ciblé par un sélecteur jQuery qui ajoute ensuite le champ de saisie Timedropper. Ce a des options vous pouvez ajouter des fonctionnalités supplémentaires (facultatives):
- Détecteur - change automatiquement heure / minute lorsque vous passez la souris
- Méridiens - définir une horloge de 12 heures au lieu de 24 heures
- Format - définit l'apparence des heures et des minutes (le style par défaut est 13h22)
- Roulette de la souris - active le changement d'heure en fonction du défilement de la roue
- Init_animation - active les effets d'animation en fondu
- setCurrentTime - ajoute automatiquement l'heure actuelle à la valeur du champ
Si vous êtes encore plus audacieux, vous pouvez changer le style en utilisant quelques thèmes pré-emballés, ou même créer votre propre à partir de zéro.
Dans une mer de plugins jQuery, Timedropper est le genou de l'abeille. C'est vraiment offre une interface unique pour toute application pour sélectionner une heure quel que soit l'appareil.
Naturellement, c'est mobile-responsive, cela fonctionne donc aussi sur les smartphones et les tablettes. Cependant, je n'aime pas le manque de prise en charge du pavé numérique. Cela semble être le moyen évident de saisir une heure. Sans cette fonctionnalité, il peut sembler limité.
Pourtant, pour un interface unique et un configuration simple, Je recommande Timedropper à quiconque est prêt à tenter le coup.
Tu peux trouver tout le code source gratuit sur GitHub et vous trouverez une démo incroyablement simple dans ce stylo, intégré ci-dessous.
Si vous avez d'autres idées ou suggestions, n'hésitez pas à les partager avec le développeur sur Twitter @felice_gattuso..
