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 <input type="time" id="time" name="time"> 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?

<form action="/action_page.php">
  <label>Time:</label>
  <input type="time" id="time" name="time">
</form>

<div>
  <h1>Dispaly the result of Time - 3 Hours</h1>
  <div class="result-1">Result</div>
</div>

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

Sercan · Accepted Answer · 2022-01-26T12:41:06.990

When you read data from the <input> 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 <input> element changes 
time1.onchange = function() {
  firstTime = this.value.split(":");
  calculate();
}

#result {
  color: red;
}

<form action="/action_page.php">
  <label>First Time:</label>
  <input type="time" id="time1" name="time">
</form>

<div>
  <h1>Dispaly the result of Time - 3 Hours</h1>
  <div class="result-1">Result: <span id="result"></span></div>
</div>

Behaviour-2

In the solution below, the value in the <input> 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;
}

<form action="/action_page.php">
  <label>First Time:</label>
  <input type="time" id="time1" name="time">
  
  <label>Second Time:</label>
  <input type="time" id="time2" name="time">
</form>

<div>
  <h1>Dispaly the result of Time - 3 Hours</h1>
  <div class="result-1">Result: <span id="result"></span></div>
</div>

Hi @Sercan. Thanks. In your solution we are calculating the difference between 2 given times, right? What I would need is just to display the result of a given time and to subtract -3 Hours to it — Enya, Jan 26 '22 at 12:14
Yes that's what I wanted to achieve :) Question: now if I type 20:25 it gives as result 17 Hours. How can I output 17:25 — Enya, Jan 26 '22 at 12:39

Marzieh Mousavi · Answer 2 · 2022-02-10T15:13:29.807

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

<html>
   <script>
      function subTime(t,x) {
        var t1 = t.split(':');
        var x1 = x.split(':');
  
        var tx0 =parseInt(t1[0])- parseInt(x[0]);
        var tx1 =parseInt(t1[1])- parseInt(x[1]);
        if(tx1<0){tx1+=60;tx0--;}
        if(tx0<0){tx0+=12}
        if(tx0<10){tx0="0"+tx0}
        if(tx1<10){tx1="0"+tx1}
        return tx0+":"+tx1;
      }

      function showTime(e){
        var x = "3"+"00";
        document.getElementById('res').innerText =  subTime(e.target.value, x)
      }
   </script>
   <body>
      <input type="time" id="time" onChange='showTime(event);'/>
      <div id='res'></div>
   </body>
</html>

How to subtract X hours to a time field

2 Answers2

Behaviour-1

Behaviour-2