Cargar fecha en input date con JavaScript
En el siguiente tutorial aprenderemos como cargar una fecha en un input de tipo date partir de un objeto date en JavaScript.
Los elementos input de tipo date necesitan el formato hora:minutos:segundos o hora:minutos para poder cargarle una fecha. Para hacerlo vamos a utilizar el siguiente método, al cual le pasaremos una fecha y nos devolverá la hora de este formato.
Ejemplo 1
El siguiente método devuelve la fecha con el formato «año-mes-dia» a partir de un objeto date. El parámetro dateObject en este caso es opcional. Si no se lo pasamos nos devolverá la fecha actual.
<!-- Input de tipo date -->
<input type="date" id="input-date"/>
<script>
// Método que recibe un objeto date
function formatDate(dateObject = new Date()) {
var year = dateObject.getFullYear();
var month = dateObject.getMonth() + 1;
var month = month > 9 ? month : "0" + month;
var day = dateObject.getDate() > 9 ? dateObject.getDate() : "0" + dateObject.getDate();
return year + "-" + month + "-" + day;
}
// Creamos un objeto date con la fecha actual
var fecha = new Date();
// Formateamos la fecha
var dateFormatted = formatDate(fecha);
// Cargamos el input con la fecha formateada
document.getElementById("input-date").value = dateFormatted;
</script>
Ejemplo 2
El siguiente método cargará directamente la fecha en el input. Para ello debemos pasarle por parámetro el elemento input y opcionalmente el objeto date con la fecha. Igual que el anterior, si no le pasamos el objeto date, cogerá la hora actual.
<!-- Input de tipo date -->
<input type="time" id="input-date"/>
<script>
// Método que recibe un elemento input date y un objeto date
function chargeDateInputDate(elem, dateObject = new Date()) {
var year = dateObject.getFullYear();
var month = dateObject.getMonth() + 1;
var month = month > 9 ? month : "0" + month;
var day = dateObject.getDate() > 9 ? dateObject.getDate() : "0" + dateObject.getDate();
var dateFormat = year + "-" + month + "-" + day;
elem.value = dateFormat;
}
// Creamos un objeto date con la fecha actual
var fecha = new Date();
// Obtenemos el elemento input time
var inputDate = document.getElementById("input-date");
// Llamamos al método para que cargue la fecha
chargeDateInputDate(inputDate, fecha);
</script>
Para aprender otras formas de formatear fechas con JavaScript no te pierdas el siguiente tutorial
Formatear fechas en JavaScript