Cargar hora en input time con JavaScript
En el siguiente tutorial aprenderemos como cargar una hora en un input de tipo time a partir de un objeto date en JavaScript..
Los elementos input de tipo time 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 hora con el formato «03:25:59» a partir de un objeto date. El parámetro dateObject en este caso es opcional. Si no se lo pasamos nos devolverá la hora actual.
<!-- Input de tipo time -->
<input type="time" id="input-time"/>
<script>
// Método que recibe un objeto date
function parseDateToTimeString(dateObject = new Date()) {
let hours = dateObject.getHours();
hours = hours < 10 ? "0" + hours.toString() : hours;
let minutes = dateObject.getMinutes();
minutes = minutes < 10 ? "0" + minutes.toString() : minutes;
let seconds = dateObject.getSeconds();
seconds = seconds < 10 ? "0" + seconds.toString() : seconds;
return hours + ":" + minutes + ":" + seconds;
}
// Creamos un objeto date con la fecha actual
var fecha = new Date();
// Formateamos la fecha
var fechaFormateada = parseDateToTimeString(fecha);
// Cargamos el input con la fecha formateada
document.getElementById("input-time").value = fechaFormateada;
</script>
Ejemplo 2
El siguiente método cargará directamente la hora 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 time -->
<input type="time" id="input-time"/>
<script>
// Método que recibe un elemento input time y un objeto date
function chargeDateInputTime(elem, dateObject = new Date()) {
let hours = dateObject.getHours();
hours = hours < 10 ? "0" + hours.toString() : hours;
let minutes = dateObject.getMinutes();
minutes = minutes < 10 ? "0" + minutes.toString() : minutes;
let seconds = dateObject.getSeconds();
seconds = seconds < 10 ? "0" + seconds.toString() : seconds;
let timeFormat = hours + ":" + minutes + ":" + seconds;
elem.value = timeFormat;
}
// Creamos un objeto date con la fecha actual
var fecha = new Date();
// Obtenemos el elemento input time
var inputTime = document.getElementById("input-time");
// Llamamos al método para que cargue la fecha
chargeDateInputTime(inputTime, fecha);
</script>
Para aprender otras formas de formatear fechas con JavaScript no te pierdas el siguiente tutorial
Formatear fechas en JavaScript