How to subtract X hours to a time field

Question

I would like to output in a div the result of a math calculation (subtract). In the specific I have a form with a that let user pick up a time. I would like to display in another div the result of the chosen time - 3 Hours.

So if time chosen is 13:00 I would like to output in the div with class result-1 10:00.

How can I achieve this in JS?


  Time:
  



  Dispaly the result of Time - 3 Hours
  Result

What I tried is to replicate what explained here but without result?

user_15032688 · Answer

When you read data from the element, the math library cannot be used directly because it reads data of type String. So I developed two different solutions that exhibit two different behaviours.

Behaviour-1

The following solution extracts the selected time value based on a time stored in the secondTime array.

const time1 = document.getElementById('time1');
let result = document.getElementById('result');

// If you want to calculate the difference to the fixed time point,
// change the contents of the secondTime array.
let firstTime = []; secondTime = ["03", "00"]

// Function that prints the time difference to the DOM
function calculate() {
  if(firstTime.length != 0) {
    var hours = firstTime[0] - secondTime[0];
    var minutes = firstTime[1] - secondTime[1];
    result.innerHTML = "";
    result.insertAdjacentHTML("beforeend", `${hours}:${minutes}`);
  } 
}

// Event fired when  element changes 
time1.onchange = function() {
  firstTime = this.value.split(":");
  calculate();
}

#result {
  color: red;
}


  First Time:
  



  Dispaly the result of Time - 3 Hours
  Result:

Behaviour-2

In the solution below, the value in the element is parsed using the String.prototype.split() method and the time difference is calculated using the calculate() method. Edit the calculate() method for more accurate calculation.

const time1 = document.getElementById('time1');
const time2 = document.getElementById('time2');
let result = document.getElementById('result');
let firstTime = [], secondTime = [];

function calculate() {
  if(firstTime.length != 0 && secondTime.length != 0) {
    var hours = secondTime[0] - firstTime[0];
    result.innerHTML = "";
    result.insertAdjacentHTML("beforeend", `${hours} Hours`);
  } 
}

time1.onchange = function() {
  firstTime = this.value.split(":");
  calculate();
}

time2.onchange = function() {
  secondTime = this.value.split(":");
  calculate();
}

#result {
  color: red;
}


  First Time:
  
  
  Second Time:
  



  Dispaly the result of Time - 3 Hours
  Result:

user_10315704 · Answer

First you should convert string time to integers then you can subtract.

How to subtract X hours to a time field

2 Answers

Behaviour-1

Behaviour-2