Unidad 8. Formularios (IX)

8.14. Tipo date

date. Este tipo de input sirve para introducir fechas (año, mes y día) bien escribiéndolas en el campo o bien mediante una pequeña ventana emergente donde se puede hacer clic en una fecha. Esta ventana tiene diferente aspecto según cada navegador pero la función es la misma: permite elegir una fecha haciendo clic con el ratón. Por ejemplo, en Chrome se muestran unas pequeñas flechas para aumentar o disminuir el valor, y una flecha más grande a la derecha para abrir la ventana emergente.

Inicialmente, en el campo se muestra el formato permitido de la fecha, en español normalmente es dd/mm/aaaa, para que el usuario sepa cómo tiene que introducir la fecha. El propio navegador suele realizar la validación de la fecha e impide introducir fechas incorrectas, por ejemplo el mes 13 o día 45.

Podemos inicializar el campo con una fecha concreta con el atributo value, pero hay que tener en cuenta que el formato interno de value y del propio campo es siempre "aaa-mm-dd" mientras que el formato de visualización y entrada depende de la configuración del navegador y sistema operativo, como hemos dicho en español es dd/mm/aaaa. Es decir que aunque escribamos y veamos 30/12/2018, el contenido del campo que se pasará al programa que recibe los datos será 2018-12-30.

Por ejemplo:

<input type="date"  name="fecha" value="2018-08-23"  />

Fecha:

8.15. Tipo time

time. Con este tipo de entrada podemos introducir un tiempo, por defecto, horas y minutos, y opcionalmente segundos. El formato de visualización es hh:min, con rango de horas de 0-23, aunque algunos navegadores pueden mostrar las horas como 0-11 pm/am. El propio navegador suele realizar la validación de la hora e impide introducir horas incorrectas, por ejemplo la hora 25 o el minuto 61.

Podemos inicializar el campo con una hora concreta con el atributo value, por ejemplo:

<input type="time"  name="horaInicio" value="23:30"  />

Hora inicio:

Podemos utilizar el atributo step para indicar un incremento en segundo, el valor por defecto es step="60", con lo cual podemos incrementar el tiempo en un minuto, si escribimos step="120" el incremento sería de 2 minutos, pero si escribimos un valor menor de 60 podremos introducir segundos en el campo, por ejemplo:

<input type="time"  name="horaInicio" value="23:30:15" step="1" />

Hora inicio:

Aunque a fecha de Enero de 2018 no todos los navegadores implementan el atributo step correctamente.