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 :
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.
Voy a realizar un listado de cada elemento y posteriormente hago un breve resumen:
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.
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.
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:
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:
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:
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: