HTML5-Formularios(III). Types de fecha y hora

Poco a poco, vamos recorriendo los «type» de la etiqueta «input»; en el articulo anterior, vimos los clásicos, que ya aportan alguna funcionalidad nueva; en este veremos una colección dedicada únicamente a la entrada de fecha y hora, que son totalmente nuevos, y que nos permiten alejarnos de javascript también en este ambiente.

 Esta es la lista de los tipos:

• date – Selector de fechas
• datetime – Selector de fecha/hora con zona horaria
• datetime-local – Selector de fecha/hora sin zona horaria
• month – selector de mes y año
• time – Selector de hora
• week – Selector de semana

type=»date»

Un input con este type, nos ofrece el clasico datepicker (el calendario, vamos), cuando pulsan en un dia, el valor retornado es con formato:

AAAA-MM-DD

Prestad atención, porque aunque en «placeholder» nos muestre nuestro formato local,  cualquier atributo que pasemos, ha de estar como os indico, con formato de año-mes-día.

Podéis probar con este pequeño formulario, y cuando enviéis al servidor, veréis como que el formato de fecha que recibís, es como os comento.

En esta etiqueta, también le podéis poner los atributos de :

• max – para indicar la fecha máxima que se puede seleccionar.p.ej:2014-12-31, para no permitir seleccionar mas allá de este año.
• min – para indicar la fecha mínima que se puede seleccionar, p.ej: 2014-01-01, para no permitir ir mas atrás de este año
• step – para controlar el intervalo de selección, p.ej: 7, solo permitirá ir seleccionando el mismo día de cada semana, pero , tened cuidado con la fecha inicial que es la que establecerá el inicio de la cuenta de 7 en 7
• value – nos permite indicar una fecha, para que aparezca seleccionada inicialmente; p.ej: 2014-08-23

El aspecto del código seria así:

type=»datetime»

Un input de este tipo, es capaz de recibir la fecha y la hora, pudiendosele indicar también la zona horaria en la que se encuentra.

Hay un mínimo de navegadores que lo tienen implementado en este momento, por lo que seguiremos las pruebas con datetime-local

type=»datetime-local»

Este campo genera un textbox en donde se puede desplegar un calendario, para introducir una fecha, y ademas, dispone de espacio para introducir la hora, en Horas, Minutos y segundo.

Como en casos anteriores, le podemos indicar fecha máxima, mínima y actual con los atributos «max», «min», y «value», si bien, deberemos añadirle la hora, minuto y segundo.

type=»month»

Nos genera un campo de texto orientado a la entrada de mes y año; como en los demás casos, podemos filtrar máximo y mínimo, asi como actual, cargando los atributos «max», «min», y «value», solo con el año y el mes.

Esa es la misma información que recibiremos en el servidor cuando enviemos el formulario.

type=»time»

Se trata de un campo de texto con capacidad de recibir la hora ,el minuto y el segundo. Como los demas, se pueden establecer máximo, mínimo y actual, rellenando los atributos «max», «min», y «value», con el formato HH:MM:SS, también podemos indicar en «step», el salto que queramos tengan las flecas de avance / retroceso.

El reloj trabaja con formato 24 horas, y no es posible modificarlo para trabajar con AM/PM.

type=»week»

Si necesitamos trabajar con semanas, este es el tipo que deberemos utilizar. Nos organiza la presentación para que elijamos la semana del año que deseemos guardar, a partir de ahi, nos enviará al servidor el año y el numero de semana. Los filtros son los mismos que en el resto de casos, pero indicando año y semana (1 a 52), y delante de la semana, deberemos indicarle un W . Tambien recibiremos esa estructura en el servidor, cuando vayamos a recoger la hora

Y estos son todos los tipos nuevos que nos trae HTML5 para manejar fechas y horas. Si no os a parecido una gran cosa, os invito a que veáis el comportamiento que tienen estas personalizaciones de HTML5 cuando estan corriendo en un móvil, ya que ira adaptando el sistema de entrada de datos para ganar comodidad, según el tipo de datos que le indiquemos.

La compatibilidad

Aunque la mayoría de navegadores ya están soportando estos tipos, si quieres asegurarte que tu pagina funcione en todos, deberemos acudir a algunas de las librerías de compatibilizacion que hay…hasta que todos los navegadores lo soporten…

Debido a su carácter generalista, y a la gran cantidad de usuarios que tiene, hemos pensado en utilizar «modernizr», que depende de «jQuery», de forma que veremos como podemos añadirla a nuestra pagina.

En las lineas 5,6 y 7 vereis que incorporamos la carga de unas rutinas que vamos a necesitar:

• jQuery, una librería con multitud de funciones útiles
• jQuery-migrate, para soportar unas carencias de jQuery que quiere utilizar modernizr
• y la comentada «modernizr» que lo único que hace es proporcionar métodos para comprobar si una funcionalidad determinada esta implementada o no en el navegador.

En la linea 9, comprobamos con modernizr, si esta implementada la funcionalidad de «date», y si no es así, cargamos una librería javascript mas, (jquery.ui), y cuando termina la carga, aplicamos el método «datepicker» a los campos que consideremos conveniente.

Si buscais un poco por Internet, veréis que también debemos importar una hoja de estilos, para que todo quede bonito…osea que …buscad, y hacedlo.

Comentarios

Ya que estamos es este capitulo, os comento que había pensado escribir un par de lineas para ver como gestionar todas estas fechas en el lado servidor, con PHP y MySQL, sin embargo, esperaré a hacerlo, en función de las necesidades que vea por los comentarios.

Nuestro siguiente articulo, veremos el resto de «type» nuevos que nos ha traído HTML5