Una vez realizado un post de cada nuevo input HTML5 he visto que muchos son de tipo fecha, por eso he creído conveniente listarlos todos en una única entrada.
Os voy a citar 2 grandes ventajas que tienen estos nuevos input de fecha HTML5 :
- Ahorro considerable de código, con la mayoría de input con solo una línea de código se consigue la funcionalidad deseada.
- Validaciones automáticas de los valores de fecha y hora seleccionados gracias al uso de atributos.
Por contra, actualmente hay un ‘problema’ que esperemos que se solucione pronto, y es que al no estar HTML5 estandarizado muchos navegadores aún no representan estos nuevos input y sus funcionalidades.
Listado de input de fecha HTML5
Voy a realizar un listado de cada elemento y posteriormente hago un breve resumen:
Date input HTML5
Este elemento vale para representar en nuestra web un datepicker o calendario, el formato de la fecha devuelto es ‘AAAA-MM-DD’.
Podéis ver toda la documentación y ejemplos en el post original ‘Date input HTML5: Un sencillo datepicker para tu formulario‘.
Os dejo una imagen de ejemplo.
datetime input HTML5
Input similar al anterior solo que este último además de la fecha envía también la hora. El formato de fecha y hora devuelto es el siguiente: ‘AAAA-MM-DDTHH:MMZ’.
Podéis ver en funcionamiento y su documentación en el post ‘Datetime input HTML5: Un campo de fecha y hora para formularios‘.
Este elemento está sin implementar en casi todos los navegadores y solo funciona a medias en Safari.
datetime-local input HTML5
Más de lo mismo, elemento idéntico al datetime pero sin enviar la zona horaria. El formato devuelto es: ‘AAAA-MM-DDTHH:MM’.
Podéis consultar su sintaxis y funcionamiento en el post ‘Input datetime-local HTML5: fecha y hora local sin timezone para formularios‘.
Os dejo una imagen de ejemplo:
Month input HTML5
Input para representar mes y año con formato ‘AAAA-MM’.
Su documentación y ejemplos la podéis encontrar en ‘Month input HTML5: Un campo de tipo mes para formularios‘.
Os dejo un pantallazo de su representación:
Time input HTML5
Con la inserción de este elemento en un formulario facilitaremos la entrada de datos para horas, el formato de la info enviada es: ‘HH:MM:SS’.
Podéis ver una amplia explicación de su uso en ‘Time input HTML5: Un campo de formulario para introducir la hora‘.
Y aquí tenéis una imagen:
Week input HTML5
Por último nos queda el input para la inserción del número de la semana de un año en cuestión. Su formato es ‘YYYY-WNN’ –> ‘2014-W07’.
También tengo un post hablando sobre este elemento: ‘Week input HTML5: Un nuevo input para insertar semanas‘.
Os muestro una imagen de su funcionamiento:
