Share
En esta sugerencia rápida, le mostraré cómo usar la nueva entrada de fecha de HTML5 y luego proporcionaré una solución de IU jQuery alternativa para los navegadores que aún no admiten este nuevo tipo de entrada.
Todos hemos estado allí. Ha creado un formulario y ahora necesita que el usuario ingrese una fecha. Pero, ¿cómo controlas en qué formato ingresan la fecha? ¿No sería más fácil si pudiéramos usar un control de calendario o un selector de fechas? ¡Absolutamente! Desafortunadamente, solo un par de navegadores admiten el nuevo HTML5 fecha tipo de entrada. Aunque está bien, usaremos jQuery UI para proporcionar un respaldo!
Primero planifiquemos el futuro y asumamos que el usuario está trabajando en un navegador moderno que admite un selector de fechas.
Selector de fechas
En el momento de escribir este artículo, solo Webkit y Opera admiten este tipo de entrada. En Firefox e Internet Explorer, el navegador usará de forma predeterminada un cuadro de texto simple, no ideal!
Usemos jQuery UI para compensar.
La herramienta de selección de fecha jQuery UI funciona de maravilla y es muy fácil de "instalar". Primero, descargamos una versión personalizada de la interfaz de usuario de jQuery, visitamos la página de descarga y solo comprobamos los elementos "Core" y "Datepicker". Deja todo lo demás sin marcar.
Haga clic en descargar, y recibirá un zip que contiene los archivos necesarios. Transfiera sobre el archivo de la interfaz de usuario jQuery y el directorio CSS a su proyecto.
Con jQuery UI importada en nuestro árbol de directorios, debemos incluir los archivos necesarios, específicamente los archivos CSS y JavaScript..
Selector de fechas
Observe cómo hemos incluido nuestra hoja de estilo de jQuery UI personalizada, la biblioteca jQuery, actualmente en la versión 1.6, y la secuencia de comandos jQuery UI personalizada, a la que he cambiado el nombre jquery-ui.js.
Accentsconagua
selector de fechas Método Nuestra base está establecida; ahora necesitamos consultar el DOM para el elemento de entrada deseado, y llamar al selector de fechas() método en él.
Estos pocos personajes solo harán el truco. Si ahora vemos la página en Firefox y hacemos clic en el elemento de entrada, verás el selector de fecha vigente.
Lo que tenemos aquí funciona, pero hay un problema. Si volvemos a un navegador avanzado como Chrome, ahora estamos en doble función. Tanto los selectores de fechas nativos como los alternativos están en vigor, simultáneamente. Necesitamos una forma de especificar que, si el navegador admite la fecha Tipo de entrada, no hagas nada. Eso es fácil!
Selector de fechas
En un proyecto del mundo real, es probable que abstraiga esto pruebas código a su propio método, o use Modernizr, pero esto hará el truco para propósitos de prueba.
En el código anterior, primero creamos un elemento de entrada y luego intentamos establecer su tipo atributo igual a fecha. Ahora, si el navegador falla al hacerlo, lo que significa que no entiende lo que fecha el tipo es: podemos asumir que es un navegador antiguo y, en cambio, proporcionar el respaldo de la interfaz de usuario jQuery. Sencillo!
La herramienta datepicker viene con una variedad de anulaciones; Puedes revisar la lista completa aquí.
Vamos a examinar una pareja juntos. ¿Qué pasa si desea especificar un formato de fecha específica. Más bien que Y / M / D, preferiríamos usar Y-M-D. Para ello, utilizamos el formato de fecha propiedad.
$ ('# date'). datepicker (dateFormat: 'yy-mm-dd'); Bueno, eso fue fácil. A continuación, digamos que solo queremos que el usuario pueda seleccionar una fecha entre ahora y cuatro días a partir de ahora. Esto es una cincha cuando usamos el fecha máxima opción. Una característica útil es que podemos usar términos relativos, como +4, durante cuatro días a partir de ahora.
$ ('# date'). datepicker (maxDate: +4); Aquí solo estamos rascando la superficie, ¡pero esto debería ayudarte a comenzar! Buscadores de fechas en varios navegadores en minutos!
