Input datetime-local HTML5: fecha y hora local sin timezone para formularios

Vamos a ver como es el nuevo input datetime-local HTML5, muy parecido y relacionado al datetime input HTML5.

La diferencia de este nuevo input HTML5 con el anterior radica en que no se pasa la información de la zona horaria en la que nos encontramos, solamente se pasa la hora.

Sintaxis de datetime-local input HTML

Esta es la sintaxis de este nuevo input de formulario:

<input type="datetime-local" name="fechayhora">

El código básico del input datetime-local es muy sencilo, ahora vamos a ver las distintas opciones de atributos que puede tener:

• El formato de fecha devuelto por defecto es AAAA-MM-DDTHH:MM.
• Se puede configurar un mínimo de fecha a seleccionar con el atributo ‘min‘:
  min=”2013-10-08T12:05:00″.
• Se puede configurar un máximo de fecha a seleccionar con el atributo ‘max‘:
  min=”2014-10-08T12:05:00″.
• Con el atributo ‘value‘ se puede poner el calendario con una fecha concreta por defecto:
  value=”2013-10-08T12:05:00″.
• Con el atributo ‘step‘ puedes establecer el avance o retroceso de días con las flechas del calendario.

Ahora os muestro un pantallazo del datetime-local input en Chrome:

Ejemplo de input datetime-local HTML5

Aquí tenéis en la demo un ejemplo de como sería el funcionamiento del nuevo input de HTML5:

Fecha y hora actual: <input type="datetime-local" name="fechahora" step="1" min="2013-01-01T00:00" max="2013-12-31T12:00" value="2013-01-01T12:00">

Los valores usados han sido:

• ‘min‘: He puesto que la fecha mínima sea el 1 de enero 2013 a las 00:00.
• ‘max‘: He puesto que la fecha máxima sea el 31 de diciembre 2013 a las 12 am.
• ‘value‘: Fecha por defecto el 1 de enero 2013 a las 12.
• ‘step‘: Que avance en intervalos de 1 en 1.

Atributos válidos en datetime-local input HTML5

Voy a listaros los atributos válidos para este input según la W3C.

1. name: Nombre del input (name=»nombre del input»).
2. disabled: Atributo que determina si está desactivado el input para la introducción de datos (disable=»disabled»), por defecto activado.
3. type: tipo de input, en este caso es ‘datetime-local’
4. form: Con este atributo se asocia el id del form al que pertenece el input (form=»id del form»).
5. autocomplete: Con autocomplete activado el input se autorrellenará con contenidos anteriormente enviados por él mismo (autocomplete=»off», autocomplete=»on»).
6. autofocus: Este atributo hace que el cursor se situe en en input (autofocus=»autofocus»).
7. list: Asocia mediante id una lista de valores predefinidos (list=»nombre lista»).
8. readonly: Con el valor activado el input no podrá variar de valor, no se podrá editar (readonly=»readonly»).
9. required: Determina si el input tiene que ser rellenado obligatoriamente (required=»required»).
10. value: Valor por defecto del input.
11. min: Valor mínimo de la hora.
12. max: Valor máximo de la hora.
13. step: Valor del intervalo de hora.
14. novalidate: Hace que el input no se valide al enviarse el formulario.

Listado de los nuevos input HTML5

En esta url tenéis el listado completo de los nuevos input de HTML5.

Listado de los nuevos atributos HTML5

En esta otra url tenéis todos los nuevos atributos HTML5 para inputs y formularios.