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

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>

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

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