How can I sum hours and minutes from a HH:MM time in two inputs in Javascript-Jquery?

Question

I have two inputs that come from two inputs with the format hh:mm.

I would like to obtain the total number of hours spent.

GOOD
Example:
Input 1: 08:30
Input 2: 10:00
Total 1.5

In the following link you can see what I have tried to do, but the problem I am having is that it is not correctly subtracting the minutes at the time and instead of having the previous result I get this:

WRONG
Example:
Input 1: 08:30
Input 2: 10:00
Total 2.5

http://jsfiddle.net/n9h5ztef/2/

____EDITED_____ I'm sorry I explained myself badly. I will try to put exactly what I have. What I am trying to do is a sum of all the hours there are, there are two morning and afternoon shifts. I need to add all the hours.

This is a real example:

1st shift
input1: 08:30
input2: 10:00

2nd shift
input3: 16:00
input4: 18:00

Total hours: 3.5

In the first turn he has done 1.5 hours and in the second two hours. Total 3.5.

Answer 1

You can simply split on : change the minutes part to hours, and than calculate difference

 let getDifference = (time1, time2) => { let [h1, m1] = time1.split(':') let [h2, m2] = time2.split(':') return ((+h1 + (+m1 / 60)) - (+h2 + (+m2 / 60))) } console.log(getDifference("10:00", "08:30"))

Note:- Don't forgot to change string to numbers before doing any arithmetic operations, here + is implicitly converting string to number

Answer 2

Try this

<html lang="en">
<body>
<input id="time1" value="08:30" size="5"> Time 1
<br>
<input id="time2" value="10:00" size="5"> Time 2
<br>
<button id="addTimes">Add times</button>
<br><br>Result <span id="timeSum">0</span>

<br>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
  const timeToNumber = (time) => {
    const parts = time.split(':');

    const part1 = parseInt(parts[0]);
    let part2 = parseInt(parts[1]);
    part2 = part2 / 60;

    return part1 + part2;
  };

  $("#addTimes").on('click', function () {
    const time1 = $('#time1').val();
    const time2 = $('#time2').val();

    const result = timeToNumber(time2) - timeToNumber(time1);
    $('#timeSum').text(result);
  });
</script>
</html>

Answer 3

I made this code sometime back to calculate the hours worked from an in time and out time precisely to the minute. I modified it to work with two shifts.

 function myFunction() { var inTime2 = document.getElementById("in-time2").value; var outTime2 = document.getElementById("out-time2").value; var hoursIn2 = inTime2.split(':', 1); var hoursOut2 = outTime2.split(':', 1); var minutesArrayIn2 = inTime2.split(':', 2); var minutesArrayOut2 = outTime2.split(':', 2); var minutesIn2 = minutesArrayIn2[1]; var minutesOut2 = minutesArrayOut2[1]; var hoursToMinutesIn2 = hoursIn2 * 60; var hoursToMinutesOut2 = hoursOut2 * 60; var timeIn2 = hoursToMinutesIn2 + parseInt(minutesIn2); var timeOut2 = hoursToMinutesOut2 + parseInt(minutesOut2); var hoursWorked2 = (timeOut2 - timeIn2) / 60; var hoursInInt2 = parseInt(hoursIn2); var hoursOutInt2 = parseInt(hoursOut2); var minutesInInt2 = parseInt(minutesIn2); var minutesOutInt2 = parseInt(minutesOut2); var sumHours2; var sumMinutes2; if (minutesOut2 < minutesIn2) { var hoursOutInt3 = hoursOutInt2 - 1; var minutesOutInt3 = minutesOutInt2 + 60; sumHours2 = hoursOutInt3 - hoursInInt2; sumMinutes2 = minutesOutInt3 - minutesInInt2; document.getElementById("hours-worked2").innerHTML = sumHours2 + ":" + sumMinutes2; } else { sumHours2 = hoursOutInt2 - hoursInInt2; sumMinutes2 = minutesOutInt2 - minutesInInt2; document.getElementById("hours-worked2").innerHTML = sumHours2 + ":" + sumMinutes2; } var inTime = document.getElementById("in-time1").value; var outTime = document.getElementById("out-time1").value; var hoursIn = inTime.split(':', 1); var hoursOut = outTime.split(':', 1); var minutesArrayIn = inTime.split(':', 2); var minutesArrayOut = outTime.split(':', 2); var minutesIn = minutesArrayIn[1]; var minutesOut = minutesArrayOut[1]; var hoursToMinutesIn = hoursIn * 60; var hoursToMinutesOut = hoursOut * 60; var timeIn = hoursToMinutesIn + parseInt(minutesIn); var timeOut = hoursToMinutesOut + parseInt(minutesOut); var hoursWorked = (timeOut - timeIn) / 60; var hoursInInt = parseInt(hoursIn); var hoursOutInt = parseInt(hoursOut); var minutesInInt = parseInt(minutesIn); var minutesOutInt = parseInt(minutesOut); var sumHours; var sumMinutes; if (minutesOut < minutesIn) { var hoursOutInt1 = hoursOutInt - 1; var minutesOutInt1 = minutesOutInt + 60; sumHours = hoursOutInt1 - hoursInInt; sumMinutes = minutesOutInt1 - minutesInInt; document.getElementById("hours-worked").innerHTML = sumHours + ":" + sumMinutes; } else { sumHours = hoursOutInt - hoursInInt; sumMinutes = minutesOutInt - minutesInInt; document.getElementById("hours-worked").innerHTML = sumHours + ":" + sumMinutes; } var totalHoursTemp = sumHours + sumHours2; var totalMinutesTemp = sumMinutes + sumMinutes2; if (totalMinutesTemp >= 60) { totalHours = totalHoursTemp + 1; totalMinutes = totalMinutesTemp - 60; document.getElementById("total-hours").innerHTML = totalHours + ":" + totalMinutes; } else { document.getElementById("total-hours").innerHTML = totalHoursTemp + ":" + totalMinutesTemp; } }

 .table-custom2 { padding: 12px 13px; border-top: 1px solid #dddddd; text-align: center; } .table-custom3 { padding: 12px 13px; border-top: 1px solid #dddddd; text-align: center; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <th class="table-custom2">In Time</th> <th class="table-custom2">Out Time</th> <th class="table-custom2">Hours Worked</th> </tr> <tr> <td class="table-custom3"><input type="text" id="in-time1" class="input-xsmall" maxlength="5" oninput="myFunction()"></td> <td class="table-custom3"><input type="text" id="out-time1" class="input-xsmall" maxlength="5" oninput="myFunction()"></td> <td class="table-custom3"><span id="hours-worked"></span></td> </tr> <tr> <td class="table-custom3"><input type="text" id="in-time2" class="input-xsmall" maxlength="5" oninput="myFunction()"></td> <td class="table-custom3"><input type="text" id="out-time2" class="input-xsmall" maxlength="5" oninput="myFunction()"></td> <td class="table-custom3"><span id="hours-worked2"></span></td> </tr> </table> <p>Total Hours Worked : </p><span id="total-hours"></span>

How can I sum hours and minutes from a HH:MM time in two inputs in Javascript-Jquery?

Question

3 answers

solution1
4 ACCPTED 2019-09-16 17:53:30

solution2
1 2019-09-16 18:10:50

solution3
1 2020-05-06 03:34:32

How can I sum hours and minutes from a HH:MM time in two inputs in Javascript-Jquery?

Question

3 answers

solution1 4 ACCPTED 2019-09-16 17:53:30

solution2 1 2019-09-16 18:10:50

solution3 1 2020-05-06 03:34:32

solution1
4 ACCPTED 2019-09-16 17:53:30

solution2
1 2019-09-16 18:10:50

solution3
1 2020-05-06 03:34:32