Controles: Campos de fecha/hora

Si nuestra intención es que el usuario introduzca una fecha concreta, en lugar de utilizar un campo de texto, lo ideal sería utilizar un control llamado datepicker. Básicamente, se trata de un calendario donde el usuario puede seleccionar el día, mes y año que desee, simplemente a golpe de clic, ahorrándose el escribirlo y simplificando el formato a utilizar, ya que puede ser muy complicado guardar siempre la fecha en un mismo formato.

Además, también existe otro control llamado timepicker, que en lugar de solicitar al usuario una fecha, solicita una hora. Ambos campos están a nuestra disposición de forma nativa en HTML5, aunque su interfaz depende del navegador y algunos no tienen soporte para todas sus características.

En HTML5.1, además, se incluyen nuevos campos que también permiten obtener fecha y hora (en un mismo campo), un mes específico o el número de semana del año, este último algo que se utiliza bastante en EEUU, aunque no demasiado en España.

Fecha y hora

Los atributos type de fecha/hora existentes en los campos <input> serían los dos primeros, mientras que los tres últimos se añadirán en HTML5.1:

Veamos algún ejemplo básico con las dos primeras, <input type="date"> e <input type="time">:

<form name="formulario" method="post" action="/send.php">
  <!-- Campo de entrada de fecha -->
  Selecciona la fecha deseada:
  <input type="date" name="fecha" min="2018-03-25" max="2018-05-25" step="2" />
  <!-- Campo de entrada de hora -->
  Selecciona la hora deseada:
  <input type="time" name="hora" min="18:00" max="21:00" step="3600" />
</form>

Como se puede ver, se pueden indicar los atributos min y max en campos <input> de fecha, donde actuarán estableciendo un límite de fecha mínima o máxima permitida, así como el campo step se podrá utilizar para restricciones al variar unidades.

Mención especial al apartado step donde hemos indicado el número de días (en el caso de la fecha), por lo que sólo aceptará días de dos en dos desde el 25 de marzo de 2018 hasta el 25 de mayo de 2018. Por su parte, el campo de la hora sólo permitirá variar las horas, ya que se ha indicado 3600 segundos (salto cada 60x60seg, o sea cada hora) en el atributo step.

Fecha y hora local

Como comentabamos, los tres últimos campos pertenecen a la especificación de HTML 5.1, aunque en algunos navegadores ya están implementados. Con ellos podremos seleccionar fecha y hora local, así como meses especificos o semanas concretas del año:

<form name="formulario" method="post" action="/send.php">
  <!-- Campo de entrada de mes -->
  Selecciona el mes deseado:
  <input type="month" name="mes"
         value="2018-05" min="2018-02" max="2018-06" step="2" />
  <!-- Campo de entrada de semana -->
  Selecciona la semana deseada:
  <input type="week" name="semana"
         value="2018-W18" min="2018-W10" max="2018-W20" step="2" />
</form>

En el primer campo <input> seleccionamos el mes con el formato yyyy-mm, donde yyyy es la cifra de 4 dígitos del año y mm el mes con 2 dígitos. En el segundo campo <input> seleccionamos la semana con el formato yyyy-Wss, donde nuevamente yyyy es el año en formato de 4 dígitos, W es siempre esa letra y ss es el número de la semana en formato de 2 dígitos.

Obsérvese que también se aplica el atributo step="2" lo que hace que sólo se puedan seleccionar semanas o meses impares. Vigilar bien la compatibilidad con navegadores de estos campos.