Llenado previo de una entrada de fecha | Programar Plus

0

HTML tiene un tipo de entrada especial para fechas, como este: <input type="date">. En los navegadores compatibles (bastante bien), los usuarios obtendrán una interfaz de usuario para seleccionar una fecha. Cosas súper útiles, especialmente porque se reduce a un uso text aporte. Pero, ¿cómo lo configura para un día en particular?

Para configurar un día en particular, deberá configurar el value a un formato AAAA-MM-DD, como este:

<input type="date" value="1980-08-26">

Nota menor: placeholder no hará nada en un navegador que admita entradas de fecha. Las entradas de fecha pueden tener min y max, por lo que solo se puede seleccionar una fecha entre un rango particular. Aquellos toman el mismo formato. Solo por diversión, hemos utilizado un valor de paso aquí para que solo se pueda seleccionar el martes:

<input type="date" min="2017-08-15" max="2018-08-26" step="7">

¿Qué tal dejar la entrada por defecto? al valor de hoy? Desafortunadamente, no existe una solución solo HTML para eso, pero es posible con JavaScript. 

<input id="today" type="date">
let today = new Date().toISOString().substr(0, 10);
document.querySelector("#today").value = today;

// or...

document.querySelector("#today").valueAsDate = new Date();

También es posible seleccionar una semana o un mes específicos. El llenado previo de esos es así:

<input type="week" value="2014-W02">

<input type="month" value="2018-08">

Si necesita tanto la fecha como la hora, también hay una entrada para eso. Solo por diversión 

<input type="datetime-local" value="2017-06-13T13:00">

¡O simplemente tiempo! Aquí usaremos el paso nuevamente solo por diversión para limitarlo a incrementos de 15 minutos:

<input type="time" value="13:00" step="900">

Demo en vivo

Consulte las entradas de fecha HTML de llenado previo de la pluma de Chris Coyier (@chriscoyier) en CodePen.

Apoyo

Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión y posteriores.

Escritorio

Cromo Firefox ES DECIR Borde Safari
25 97 No 13 TP

Móvil / Tableta

Android Chrome Android Firefox Androide Safari de iOS
96 95 4.4 15,2
(Visited 6 times, 1 visits today)