<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="container mt-3">
<div class="row">
<div class="col">
<div class="form-floating">
<input type="text" class="form-control" id="entrada" onkeyup="MaskHour(this)" onchange="calculo()" placeholder="Hora entrada">
<label for="entrada">Hora entrada</label>
</div>
</div>
<div class="col">
<div class="form-floating">
<input type="text" class="form-control" id="salida" onkeyup="MaskHour(this)" onchange="calculo()" placeholder="Hora salida">
<label for="salida">Hora salida</label>
</div>
</div>
<div class="col">
<div class="form-floating">
<input type="text" class="form-control" id="horas" placeholder="Horas total" readonly>
<label for="horas">Horas total</label>
</div>
</div>
<div class="col">
<div class="form-floating">
<input type="text" class="form-control" id="extras" placeholder="Horas extras" readonly>
<label for="extras">Horas extras</label>
</div>
</div>
</div>
</div>
<script>
const MaskHour = (e) => {
var value = e.value;
if (value.length == 2) {
value += ":";
} else if (value.length == 5) {
value += " ";
}
e.value = value;
};
const calculo = () => {
let inicio = document.getElementById("entrada"),
final = document.getElementById("salida"),
hora_inicio = inicio.value.split(":"),
hora_final = final.value.split(":");
if (inicio.value != "" && final.value != "") {
if (Number(hora_final[0]) > Number(hora_inicio[0])) {
let d_inicio = new Date();
d_inicio.setHours(Number(hora_inicio[0]), Number(hora_inicio[1]), 0);
let d_final = new Date();
d_final.setHours(Number(hora_final[0]), Number(hora_final[1]), 0);
let d = d_final.getTime() - d_inicio.getTime();
d = (d - (d % 1000)) / 1000;
d = (d - (d % 60)) / 60;
let min = d % 60;
let hr = (d - min) / 60;
horas.value = hr + ":" + (min > 9 ? min : "0" + min) + " min";
extras.value =
hr > 8 ? hr - 8 + ":" + (min > 9 ? min : "0" + min) + " min" : "";
} else {
alert("La hora final no puede ser menor a la hora de entrada");
}
}
};
// Usar con input type=time
// const calculo = () => {
// let inicio = document.getElementById("entrada"),
// final = document.getElementById("salida"),
// hora_inicio = inicio.value.split(":"),
// hora_final = final.value.split(":");
// if (inicio.value != "" && final.value != "") {
// if (Number(hora_final[0]) > Number(hora_inicio[0])) {
// let d_inicio = inicio.valueAsDate,
// d_final = final.valueAsDate;
// console.log(d_final);
// let d = d_final.getTime() - d_inicio.getTime();
// d = (d - (d % 1000)) / 1000;
// d = (d - (d % 60)) / 60;
// let min = d % 60;
// let hr = (d - min) / 60;
// horas.value = hr + ":" + min + 'min';
// extras.value = hr > 8 ? hr - 8 + ":" + min + 'min': "";
// } else {
// alert("La hora final no puede ser menor a la hora de entrada");
// }
// }
// };
</script>
</body>
</html>