Crear entrada de fecha y hora minimalista con Flatpickr
Uno de los campos más difíciles de crear es el fecha / hora seleccione. Los desarrolladores a menudo recurren a menús selectos simples para el mes / día / año o confían en varios complementos para hacer el trabajo.
Los campos de selección funcionan bien pero son un poco torpes. En su lugar, puedes mejorar tu forma con la Plugin de flatpickr. Es un Selector de calendario de JavaScript gratuito y de código abierto con cero dependencias.
Era Diseñado pensando en el minimalismo., por lo que puede encajar en cualquier diseño de sitio web, cualquier formulario web, y debe poder utilizarse desde cualquier dispositivo moderno.
Una cosa buena de este plugin es la variedad de opciones personalizadas. Puede volver a planificar cómo aparecen las fechas en el campo de texto y dónde comienza el calendario (el valor predeterminado es “hoy”).
Pero, también puedes Úsalo estrictamente como un selector de fechas Si no tienes necesidad de seleccionar la hora. Es simplemente una función opcional que le permite pasar más datos a través del formulario con este selector..
Echa un vistazo a la Página de ejemplos ver flatpickr en acción.
Tú también puedes establecer opciones específicas para limitar el comportamiento del selector de fechas, como por ejemplo:
- Anulando ciertas fechas / rangos
- Solo se permiten ciertas fechas / rangos.
- Permitir múltiples selecciones de fecha
- “Modo de rango” para seleccionar una fecha de inicio y finalización
- Solo un selector de fecha, o simplemente la hora, o la fecha y la hora juntas
Las opciones son prácticamente infinitas y todas funcionan a través de este complemento de vainilla de JavaScript..
Los usuarios móviles a menudo prefieren el selector de fecha nativo, pero usted puede anular esto con una configuración móvil en JavaScript. De esta manera tendrás la misma interfaz funcionando en todos los dispositivos..
Y, incluso puedes añadir soporte IE9 con un polyfill lo que hace de este uno de los complementos de selector de fecha más compatibles que existen.
La instalación es simple con comandos para npm, Bower y Yarn. O bien, puede descargar los archivos de origen directamente desde GitHub si prefieres esa ruta.
Todo lo que necesita saber se puede encontrar en la página de configuración que le muestra cómo agregar los archivos a su encabezado Y cómo llamar a este selector de fechas en cualquier campo. Fácilmente uno de los mejores complementos de selector de fecha diseñado lo suficientemente simple para adaptarse a cualquier diseño.
