Elemento input (type=datetime)

Si no sabes lo que es un elemento o cómo debes usarlo, te recomiendo leer el tutorial "Tags y atributos en HTML" que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento input, teniendo el valor "datetime" en su atributo type, representa un campo para una fecha y hora global que recolecta datos con información de zona horaria. Este tipo de campos es particularmente útil para la recolección de puntos en el tiempo universales, que son equivalentes en cualquier parte del mundo. Por ejemplo, la fecha y hora de una reunión online debería ser recolectada por este control, de modo que sea exactamente la misma para todos los participantes.

En navegadores modernos los campos de fecha y hora global son normalmente representados por controles que permiten a los usarios cambiar su valor de manera gráfica (como, por ejemplo, un calendario), en lugar de tener que ingresarlo directamente como una cadena.

Previo al envío del formulario, los navegadores que soportan este mecanismo convierten la información ingresada a una cadena que representa una fecha y hora global normalizada a UTC (esto es lo que el agente procesador recibirá en el servidor). Las reglas para componer una fecha y hora global o fecha y hora global normalizada a UTC válida se describen a continuación.

Fecha y hora globales

La sintaxis de una fecha y hora global está compuesta por:

  1. Una sintaxis válida de fecha representando año, mes y día.
  2. Una letra T mayúscula o un carácter de espacio (" ").
  3. Una sintaxis válida de hora representando la hora.
  4. Una sintaxis válida de zona horaria representando el desplazamiento de zona horaria.

Ejemplo

<time>2014-01-14 00:12-03:00</time>
<time>2014-05-16T20:12+00:30</time>
<time>2201-08-20 03:04:22.5-5:00</time>
<time>2000-04-01T02:00:00.00+4:00</time>

Para que una fecha y hora global sea una cadena de fecha y hora global normalizada a UTC, debe estar compuesta por:

  1. Una sintaxis válida de fecha representando año, mes y día, convertida a la zona horaria UTC.
  2. Una letra T mayúscula.
  3. Una sintaxis válida de hora representando la hora, convertida a la zona horaria UTC y en su variante más corta (por ejemplo, con la omisión del número de segundos cuando es cero).
  4. Una letra Z mayúscula.

Ejemplo

<time>2014-02-03T22:00Z</time>
<time>2010-01-01T00:00:00.001Z</time>
<time>2050-01-03T23:59Z</time>
<time>1980-12-23T00:05Z</time>

Fechas

La sintaxis de una fecha está compuesta por:

  1. Una sintaxis válida de mes representando un año y un mes.
  2. Un signo menos o guión ("-").
  3. Un día de dos dígitos entre 1 y el número de días del mes y año previamente especificados.

Ejemplo

<time>2014-07-05</time>
<time>1920-12-31</time>

Meses

La sintaxis de un mes está compuesta por:

  1. Un año mayor que cero, compuesto por, al menos, cuatro dígitos.
  2. Un signo menos o guión ("-").
  3. Un mes entre 1 y 12, compuesto de dos dígitos.

Ejemplo

<time>2014-07</time>
<time>0512-12</time>

Horas

La sintaxis de una hora está compuesta por:

  1. Dos dígitos representando una hora entre 0 y 23.
  2. Un carácter de dos puntos (":").
  3. Un minuto de dos dígitos entre 0 y 59.
  4. La siguiente información, que es opcional si el número de segundos es cero:
    1. Un carácter de dos puntos (":").
    2. Dos dígitos representando la parte entera de los segundos, entre 0 y 59.
    3. La siguiente información, que es opcional si el número de segundos es entero:
      1. Un punto (".").
      2. La parte fraccionaria de los segundos compuesta por uno, dos o tres dígitos.

Ejemplo

<time>23:59:59.999</time>
<time>10:20:00.000</time>
<time>10:20</time>
<time>10:20:00</time>

Zonas horarias

La sintaxis de una zona horaria está compuesta por:

  1. Un signo menos o guión ("-") si el desplazamiento es negativo, y un signo más ("-") en caso contrario.
  2. Dos dígitos representando una hora entre 0 y 23.
  3. Opcionalmente, un carácter de dos puntos (":").
  4. Un minuto de dos dígitos entre 0 y 59.

Ejemplo

<time>-12:00</time>
<time>+00:00</time>
<time>+00:30</time>
<time>-1100</time>

Este formato permite un rango de zonas horarias más amplio de los que actualmente se utiliza en la práctica. La razón de este exceso es mejorar la adaptabilidad a futuros cambios en las zonas horarias, Ya que éstos están sujetos a decisiones políticas.

El soporte provisto por los navegadores para campos de fecha y hora es muy bajo. Para mejorar la compatibilidad, los autores pueden tener que recurrir a programas con el fin de proveer controles avanzados y validar los datos antes del envío.

Los atributos min y max pueden ser usados en este elemento para establecer un rango de fechas y horas válidas que el usuario tendrá permitido enviar.

Ejemplos

En el primer ejemplo crearemos solamente un formulario con un control de fecha y hora. Aquí podrás notar la funcionalidad provista por tu navegador (si la tiene) para el control.

<form action="../../form-result.php" target="_blank">
  <p>Reunión: <input type="datetime" name="tiemporeunion"> <input type="submit" value="Enviar datos"></p>
</form>

Reunión:

En nuestro segundo ejemplo proveeremos una lista de valores sugeridos mediante el elemento datalist, para que el usuario pueda seleccionar rápidamente uno de los valores predefinidos cuando el navegador los sugiera. El control estará enlazado al datalist debido a la coincidencia entre el atributo id de la lista y el atributo list del control.

El soporte provisto por los navegadores para datalist es incompleto. Los autores pueden tener que recurrir a programas para proveer esta funcionalidad consistentemente.

Los valores provistos por el elemento datalist deben acatar los requerimientos de las cadenas de fecha y hora global.

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Haz una cita: <input type="datetime" name="fechcita" list="listafechascita">
    <input type="submit" value="Enviar datos">
  </p>
</form>
<datalist id="listafechascita">
  <option value="2015-05-05 08:00Z">
  <option value="2015-05-12 11:30-03:00">
  <option value="2015-05-19 09:00+01:00">
  <option value="2015-05-26 22:19:45.32+00:00">
</datalist>

Haz una cita:

En nuestro último ejemplo trabajaremos con los atributos min, max y step para poner restricciones a los valores que el usuario puede ingresar. Con esta configuración estableceremos una fecha mínima, una fecha máxima, y la distancia entre una fecha seleccionable y la siguiente (en número de segundos), respectivamente. Más específicamente, sólo permitiremos al usuario seleccionar cualquier hora en el rango, sin minutos ni segundos.

Cuando el atributo step está presente, los autores deberían especificar una fecha y hora para ser tomada como paso inicial. Esto puede hacerse mediante los atributos min y value. Cuando ambos están presentes, el atributo min tiene precedencia.

Los valores provistos en los atributos min, max y step deben acatar los requerimientos de las cadenas de fecha y hora global.

<form action="../../form-result.php" target="_blank">
  <p>
    Haz una cita: <input type="datetime" name="fechcita" min="2015-02-20 10:00Z" max="2015-04-24 10:00Z" step="3600">
    <input type="submit" value="Enviar datos">
  </p>
</form>

Haz una cita:

Atributos

Atributos específicos

autofocus

Un valor booleano que instruye al navegador a establecer el enfoque sobre este control cuando el documento termina de cargarse o cuando el cuadro de diálogo (dialog) donde el control se encuentra es mostrado. Si el atributo tiene el valor "autofocus" o la cadena vacía (""), o si simplemente está presente, el control debería obtener el enfoque tan pronto como sea posible, luego de que la página o cuadro de diálogo hayan sido cargados.

Ejemplo

<p>Las incripciones estarán abiertas desde: <input type="datetime" name="inscripcionesabiertas" autofocus></p>

disabled

Un valor booleano que indica si el control se encuentra deshabilitado o no. Si el atributo toma el valor "disabled" o la cadena vacía (""), o si está simplemente presente, el control estará deshabilitado.

Los controles deshabilitados son representados en color gris (si son visibles), son impedidos para interactuar con el usuario y, lo más importante, sus valores (si lo tienen) no son enviados cuando el formulario es despachado.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Reunión: <input type="datetime" name="fechareunion" disabled>
    <input type="submit" value="Enviar datos">
  </p>
</form>

Reunión:

form

El valor del atributo id del formulario con el que este control está asociado.

Este atributo es nuevo en HTML5 y ayuda a definir la pertenencia de los controles en formularios anidados o distantes.

Ejemplo

<p>Partida: <input type="datetime" name="fechapartida" form="formulario1"></p>
<form id="formulario1" action="../../form-result.php" method="post" target="_blank">
  <p><input type="submit" value="Enviar datos"></p>
</form>

Partida:

list

Un identificador que concuerda con el valor del atributo id del elemento datalist con el que este control está asociado. El datalist referenciado por este atributoproveerá un número de sugerencias que los usuarios pueden escoger para autocompletar el control.

El soporte provisto por los navegadores para datalist es incompleto. Los autores pueden tener que recurrir a programas para proveer esta funcionalidad consistentemente.

Los valores provistos por el elemento datalist deben acatar los requerimientos de las cadenas de fecha y hora global.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Partida: <input type="datetime" name="fechapartida" list="listafechaspartida">
    <input type="submit" value="Enviar datos">
  </p>
</form>
<datalist id="listafechaspartida">
  <option value="2015-03-10 09:00Z">
  <option value="2015-03-10 10:00Z">
  <option value="2015-03-10 11:00Z">
  <option value="2015-03-10 12:00Z">
</datalist>

Partida:

max

La fecha máxima que el usuario debería estar habilitado para seleccionar. Los navegadores que soporten el mecanismo deberían impedir la selección de cualquier fecha superior a la especificada en este atributo.

El valor provisto en este atributo debe acatar los requerimientos de las cadenas de fecha y hora global.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Esperar hasta: <input type="datetime" name="esperarhasta" max="2015-12-31 23:59:59.999Z">
    <input type="submit" value="Enviar datos">
  </p>
</form>

Esperar hasta:

min

La fecha mínima que el usuario debería estar habilitado para seleccionar. Los navegadores que soporten el mecanismo deberían impedir la selección de cualquier fecha inferior a la especificada en este atributo.

El valor provisto en este atributo debe acatar los requerimientos de las cadenas de fecha y hora global.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Nacido en: <input type="datetime" name="nacidoen" min="2003-02-10 10:00Z">
    <input type="submit" value="Enviar datos">
  </p>
</form>

Nacido en:

name

Un nombre para el control. Este nombre será enviado por el navegador al agente procesador, emparejado con el contenido del atributo value. Ambos atributos juntos conformarán un par nombre-valor que será utilizado para procesar la información del formulario.

Actualmente, el valor isindex, antiguamente utilizado de manera especial por algunos navegadores e incluido en el estándar HTML, no está permitido en este atributo.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Fecha de nacimiento: <input type="datetime" name="nacimiento">
    <input type="submit" value="Enviar datos">
  </p>
</form>

Fecha de nacimiento:

readonly

Un valor booleano que instruye al navegador a impedir que el usuario cambie el valor del control. Si este atributo tiene el valor "readonly" o la cadena vacía (""), o si simplemente está presente, el usuario no tendrá premitido hacer cambios al valor en el control.

Aunque este atributo previene que el valor del control sea editado, no toda interacción es bloqueada: los usuario aún podrán seleccionar y copiar el texto en el control.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Cita: <input type="datetime" name="cita" value="2015-05-15 15:30+03:00" readonly>
    <input type="submit" value="Enviar datos">
  </p>
</form>

Cita:

required

Un valor booleano que indica si este control puede ser dejado en blanco o no. Si este atributo tiene el valor "required" o la cadena vacía (""), o si está siplemente presente, el usuario tendrá que rellenar el control a fin de poder enviar el formulario.

Si un control con el atributo required presente es dejado en blanco, los navegadores que soporten este mecanismo arrojarán un error previo al envío y cancelarán el proceso inmediatamente.

El soporte provisto por los navegadores para el atributo required es incompleto. Los autores pueden tener que recurrir a programas para proveer esta funcionalidad consistentemente.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Miembro desde: <input type="datetime" name="miembrodesde" required>
    <input type="submit" value="Enviar datos">
  </p>
</form>

Miembro desde:

step

Un número de segundos para ser usado como la cantidad de espacio entre un valor permitido y el siguiente. La presencia de este atributo reduce el número de opciones que tendrá el usuario al restringir la selección de valores intermedios.

Para evitar comportamientos inesperados, los autores deberían especificar una fecha y hora para ser tomada como paso inicial. Esto puede hacerse mediante los atributos min y value. Cuando ambos están presentes, el atribtuo min tiene precedencia.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Próxima sesión: <input type="datetime" name="proximasesion" step="3600" min="2015-02-16 08:00-03:00">
    <input type="submit" value="Enviar datos">
  </p>
</form>

Próxima sesión:

type

Un valor que indica el tipo de campo que representa este elemento. Existen veintidós valores posibles (insensibles a mayúsculas/minúsculas):

  • hidden: un control oculto utilizado para enviar información al servidor, típicamente manejado por programas.
  • text: un control usado para la entrada de una sola línea de texto.
  • search: igaul a text pero con fines de búsqueda.
  • tel: un control usado para proveer un número de teléfono.
  • url: una caja de texto usada para el ingreso de un único URL absoluto.
  • email: un control diseñado para editar una o más direcciones de e-mail.
  • password: una caja de texto para la edición de contraseñas, donde los caracteres son representados por puntos.
  • date: un control para ingresar una fecha específica.
  • month: un control para ingresar un mes específico.
  • week: un control para ingresar una semana específica.
  • time: un control para ingresar una hora específica.
  • datetime-local: un control para ingresar una fecha y hora local específica.
  • number: un control para ingresar un número.
  • range: un control para ingresar uno o dos números dentro de un rango.
  • color: un control para ingresar un color.
  • checkbox: un control para ingresar un valor booleano (verdadero/falso).
  • radio: un control para elegir una única opción entre varias.
  • file: un control usado para subir archivos al servidor.
  • submit: un botón usado para enviar el formulario.
  • image: igual a submit pero con la habilidad de verse como una imagen en lugar de usar la apariencia predeterminada de los botones.
  • reset: un botón usado para reiniciar los controles del formulario a sus valores iniciales.
  • button: un botón sin una acción predeterminada asociada.

Cuando este atributo está ausente, el elemento se comporta como si tuviera el valor "text".

Ejemplo

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

value

Un valor inicial para el control, que será establecido cuando la página se cargue y cuando el botón de reinicio sea presionado.

El valor provisto en este atributo debe acatar los requerimientos de las cadenas de fecha y hora global.

Ejemplo

<form action="../../form-result.php" method="post" target="_blank">
  <p>Envíame una alerta en: <input type="datetime" name="alerta" value="2015-02-21 15:35Z"></p>
  <p>
    <input type="submit" value="Enviar datos">
    <input type="reset" value="Restaurar formulario">
  </p>
</form>

Envíame una alerta en:

Atributos globales

Para más información acerca de los atributos globales refiérete a esta lista de atributos gloables en HTML5.

Eventos

Eventos globales

Para más información acerca de los eventos globales refiérete a esta lista de eventos globales en HTML5.