Datetime input HTML5: otro campo para fecha y hora para formularios

Vamos a repasar el datetime input HTML5, muy similar al anteriormente visto date input HTML5.

Además de la fecha nos permite seleccionar una hora concreta, muy útil para combinar con PHP date() y así obtener fechas por defecto.

En este post tenéis listados los diferentes inputs HTML5 para manejar fechas:

Los input de fecha HTML5 para formularios.

Sintaxis de datetime input HTML5

Veamos la sintaxis de este nuevo input HTML5 extraída de su web oficial:

<input type="datetime" name="fecha">

1	<input type="datetime" name="fecha">

Como se aprecia el código del input HTML5 es muy básico, vamos a ver los diferentes atributos que podemos usar en él:

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

En la imagen inferior os muestro como se ve el elemento en Safari, en Chrome y Firefox no he podido reproducirlo, habrá que esperar a que lo implementen:

Ejemplo de datetime input HTML5

Es este ejemplo vamos a ver la funcionalidad del datetime input:

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

1	Fecha y hora actual: <input type="datetime" name="fechahora" step="1" min="2013-01-01T00:00Z" max="2013-12-31T12:00Z" 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.

Ejemplo de datetime input HTML5 con fecha y hora actual con la ayuda de PHP date()

Nuevo ejemplo para poner la fecha y hora actual por defecto en el datetime input con la ayuda de PHP date():

Fecha y hora actual: <input type="datetime" name="fechahora" step="1" min="2013-01-01T00:00Z" max="2013-12-31T12:00Z" value="<?php echo date("Y-m-d\TH-i");?>">

1	Fecha y hora actual: <input type="datetime" name="fechahora" step="1" min="2013-01-01T00:00Z" max="2013-12-31T12:00Z" value="<?php echo date("Y-m-d\TH-i");?>">

Como podéis ver en el campo value he metido la llamada a PHP date() y he pasado los parámetros necesarios para respetar el formato AAAA-MM-DD.

Atributos válidos en datetime input HTML5

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

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