Campos de entrada de tiempo personalizados con jQuery Timedropper
Algunos formularios web requieren entradas basadas en la fecha y los complementos del selector de fecha pueden ayudar con eso. Pero que pasa entradas de tiempo?
Con el plugin gratuito jQuery. Cronometrador, puedes añadir recolectores de tiempo personalizados para programar citas, programar llamadas telefónicas o prácticamente cualquier cosa que necesite.
Es increíblemente simple y tu Solo necesito la librería jQuery. Para empezar. Una vez que haya instalado esa biblioteca, puede agregar los archivos JS / CSS de Timedropper y dejar que se ejecute. Eso es!
Cada campo de entrada debe ser seleccionado por un selector de jQuery que luego agrega el campo de entrada Timedropper. Esta tiene opciones Usted puede agregar con características adicionales (opcionales):
- Cambio automático - Cambia automáticamente la hora / minuto al subir el mouse.
- Meridianos - programar un reloj de 12 horas en lugar de un reloj de 24 horas
- Formato - establece cómo aparecen las horas y los minutos (el estilo predeterminado es 1:22 pm)
- Rueda de ratón - permite el cambio de horario basado en la rueda de desplazamiento
- Inicio_animacion - enciende los efectos de animación de desvanecimiento
- setCurrentTime - agrega automáticamente la hora actual al valor del campo
Si eres aún más atrevido puedes cambiar el estilo usando algunos temas pre-empacados, o incluso construya los suyos desde cero.
En un mar de plugins jQuery, Timedropper son las rodillas de la abeja. Realmente ofrece una interfaz única para que cualquier aplicación seleccione una hora independientemente del dispositivo.
Naturalmente es sensible al móvil, por lo que también funciona en teléfonos inteligentes y tabletas. Sin embargo, no me gusta el falta de soporte de teclado numérico. Esa parece ser la forma obvia de ingresar una hora, así que sin esa característica, puede sentirse limitado..
Aún así, por un interfaz única y un configuración simple, Recomiendo Timedropper para cualquiera que esté dispuesto a darle una oportunidad..
Puedes encontrar todo el código fuente gratis en GitHub y encontrarás una demo increíblemente simple en esta pluma, incrustada a continuación.
Si tiene alguna otra idea o sugerencia, no dude en compartirla con el desarrollador en Twitter @felice_gattuso.
