How can I correctly subtract minutes from each other in JavaScript?

byMR

August 11, 2022

So I am trying to subtract two dates and ideally it should go like this:

23:00 – 22:11 = 0 hours 49 minutes

But instead I keep getting 1 hours -11 minutes.

I do understand why this is happening, I am just not sure how could I fix it.

let date1 = new Date("2022-08-05T23:00:00Z");
document.getElementById('test1').innerHTML = date1.toISOString().slice(0,-8)+"Z";

let date2 = new Date("2022-08-05T22:11:00Z");
document.getElementById('test2').innerHTML = date2.toISOString().slice(0,-8)+"Z";


let dateArrays = [date1, date2];

let allItems = document.querySelectorAll('.timePass');

  allItems.forEach((item, index) =>{

  let sum = (date1.getUTCHours() - dateArrays[index].getUTCHours());
  let sum2 = (date1.getUTCMinutes() - dateArrays[index].getUTCMinutes());

    item.innerHTML = `(${sum}h  ${sum2}m ago)`;
  });

<th>
                    <div>
                      <span id="test1"></span>
                      <span class="timePass"></span>
                    </div>
                  </th>

                  <th>
                    <div>
                      <span id="test2"></span>
                      <span class="timePass"></span>
                    </div>
                  </th>

>Solution :

So, the minutes have a negative value, you need to subtract from the hour 1 and sum the minutes by 60

let date1 = new Date("2022-08-05T23:00:00Z");
document.getElementById('test1').innerHTML = date1.toISOString().slice(0,-8)+"Z";

let date2 = new Date("2022-08-05T22:11:00Z");
document.getElementById('test2').innerHTML = date2.toISOString().slice(0,-8)+"Z";



let dateArrays = [date1, date2];

let allItems = document.querySelectorAll('.timePass');

  allItems.forEach((item, index) =>{

  let sum = (date1.getUTCHours() - dateArrays[index].getUTCHours());
  let sum2 = (date1.getUTCMinutes() - dateArrays[index].getUTCMinutes());
  
    if (sum2 < 0) {
      sum = sum - 1
      sum2 = 60 + sum2
    }

    item.innerHTML = `(${sum}h  ${sum2}m ago)`;
  });

<th>
                    <div>
                      <span id="test1"></span>
                      <span class="timePass"></span>
                    </div>
                  </th>

                  <th>
                    <div>
                      <span id="test2"></span>
                      <span class="timePass"></span>
                    </div>
                  </th>