JavaScript - calculo de horas in situ

Pos: 15

Val: 159

calculo de horas in situ

Publicado por Eduardo (179 intervenciones) el 03/03/2023 17:54:21

Hola a todos espero esten muy bien... como hago para construir el siguiente codigo el cual calcule asi la siguiente distribucion y caklculo entre horas...

se agregue la Hora de Inicio
Se agregue la Hora Final

En Total se haga el calculo de esas horas

y en el siguiente campo si este calculo supera las 8 horas laboradas el resto de horas las ponga por ejemplo el calculo de 9:00 la hora extra seria 1:00

calculooooo

espero me puedan ayudar

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

calculo de horas in situ

Publicado por Jefferson (22 intervenciones) el 03/03/2023 20:18:41

Hola

Como agregas la hora inicio y final

input type number, text, time ??

Todo depende la forma que manejas los input

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

Pos: 15

Val: 159

calculo de horas in situ

Publicado por Eduardo (179 intervenciones) el 03/03/2023 21:16:30

Hola y gracias por responder este ejemplo ya lo habia cargado falta solo es adicionarle el nuevo campo para que muestre ese resto cuando las horas superen las 8:00 habituales.

<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>

<script>

function newDate(partes) {

    var date = new Date(0);

    date.setHours(partes[0]);

    date.setMinutes(partes[1]);

    return date;

function prefijo(num) {

    return num < 10 ? ('0' + num) : num;

function calculardiferencia(){

  var dateDesde = newDate($('.hora5').val().split(':'));

  var dateHasta = newDate($('.hora6').val().split(':'));

  var minutos = (dateHasta - dateDesde)/1000/60;

  var horas = Math.floor(minutos/60);

  minutos = minutos % 60;

  $('.horaextrat').val(prefijo(horas) + ':' + prefijo(minutos));

</script>

<script>

window.addEventListener('load',mostrar);

function mostrar() {

  var x = document.getElementById('alerta');

  if (x.style.display === 'none') {

      x.style.display = 'block';

  } else {

      x.style.display = 'none';

</script>

<label>Inicia:</label>

                  <input name="horaextra1[]" type="text" required class="hora5" id="horaextra1" autocomplete="off" size="2" maxlength="5" onBlur="calculardiferencia();"/>

                  <label>Finaliza:</label>

                  <input name="horaextra2[]" type="text" required class="hora6" id="horaextra2" autocomplete="off" size="2" maxlength="5" onBlur="calculardiferencia();"/>

                  Total Horas Extras:

                  <input name="horaextrat[]" style="color: #ff0000;"  type="text" class="horaextrat" autocomplete="off" size="2" maxlength="5" readonly/>

                  </label>

Valora esta respuesta

Comentar

Pos: 15

Val: 159

calculo de horas in situ

Publicado por Eduardo (179 intervenciones) el 03/03/2023 21:20:38

agregandole el campo Extra para mostrar el valor que menciono (cuando supera las 8:00) por ejemplo:

Captura

<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>

<script>

function newDate(partes) {

    var date = new Date(0);

    date.setHours(partes[0]);

    date.setMinutes(partes[1]);

    return date;

function prefijo(num) {

    return num < 10 ? ('0' + num) : num;

function calculardiferencia(){

  var dateDesde = newDate($('.hora5').val().split(':'));

  var dateHasta = newDate($('.hora6').val().split(':'));

  var minutos = (dateHasta - dateDesde)/1000/60;

  var horas = Math.floor(minutos/60);

  minutos = minutos % 60;

  $('.horaextrat').val(prefijo(horas) + ':' + prefijo(minutos));

</script>

<script>

window.addEventListener('load',mostrar);

function mostrar() {

  var x = document.getElementById('alerta');

  if (x.style.display === 'none') {

      x.style.display = 'block';

  } else {

      x.style.display = 'none';

</script>

<label>Inicia:</label>

                  <input name="horaextra1[]" type="text" required class="hora5" id="horaextra1" autocomplete="off" size="2" maxlength="5" onBlur="calculardiferencia();"/>

                  <label>Finaliza:</label>

                  <input name="horaextra2[]" type="text" required class="hora6" id="horaextra2" autocomplete="off" size="2" maxlength="5" onBlur="calculardiferencia();"/>

                  Total :

                  <input name="horaextrat[]" style="color: #ff0000;"  type="text" class="horaextrat" autocomplete="off" size="2" maxlength="5" readonly/>

                  </label>

                  Extra :

                  <input name="resto[]" style="color: #ff0000;"  type="text" class="horaextrat" autocomplete="off" size="2" maxlength="5" readonly/>

                  </label>

Valora esta respuesta

Comentar

calculo de horas in situ

Publicado por Jefferson (22 intervenciones) el 03/03/2023 21:49:07

Te la pondré mas fácil

<!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="time" class="form-control" id="entrada" onchange="calculo()" placeholder="Hora entrada">

                    <label for="entrada">Hora entrada</label>

                </div>

            </div>

            <div class="col">

                <div class="form-floating">

                    <input type="time" class="form-control" id="salida" 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 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;

      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>

Saludos

Valora esta respuesta

Comentar

Pos: 15

Val: 159

calculo de horas in situ

Publicado por Eduardo (179 intervenciones) el 03/03/2023 21:55:55

Maravilloso Maravilloso pero existe un problema aca manejamos la hora militar o 24 esos campos time no la admiten como hago para que funcione tipeandolo sin usar el tipo time???

yo en esos campos hago para que el formato hora se escriba automático y separe el : a medida que se escriba por ejemplo 02:00

Valora esta respuesta

Comentar

calculo de horas in situ

Publicado por Jefferson (22 intervenciones) el 03/03/2023 23:02:02

Lamentablemente no se puede usar time en formato 24hr a menos que cambies la configuración regional del sistema.

Es un tema muy apropiado, dado que HTML5 en su momento prometio poder cambiar los widget DateTimePicker, pero aun el
asunto no ha sido resuelto https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time

Mas sin embargo con un poco de ingenio, podemos echar a andar lo que solicitas

100

101

102

103

104

<!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>

Saludos espero haber sido util

Valora esta respuesta

Comentar

Pos: 15

Val: 159

calculo de horas in situ

Publicado por Eduardo (179 intervenciones) el 03/03/2023 23:25:18

perfecto mil gracias!!!!

Valora esta respuesta

Comentar

error al guardar usando formulario validado por javascript con expresiones regulares

MOSTRAR MES DEL CALENDARIO EN EL QUE ESTAMOS