Si el usuario debe introducir una fecha o una hora, existen campos de entrada de datos que facilitan la tarea a los usuarios.

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.

Datepicker en Chrome, Android 5 y Windows 10

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 E.E.U.U., aunque no demasiado en España.

Tipos de campos de 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:

Tipo de información a obtener Etiqueta a utilizar Ejemplo
Fecha <input type="date">
Hora <input type="time">
Fecha y hora local <input type="datetime-local">
Mes <input type="month">
Semana <input type="week">

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

<form name="formulario" method="post" action="http://pagina.com/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.

Tipos de campos de fecha y hora de HTML 5.1

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="http://pagina.com/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.

Manz
Publicado por Manz

Docente, divulgador informático y freelance. Trabaja como autónomo, escribe en Emezeta.com (sitio web de tecnología con +10.000 visitas diarias) y es profesor en la Oficina de Software Libre de la Universidad de La Laguna, en Tenerife (Islas Canarias).