How to subtract X hours to a time field-CodePudding

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 >Result</div>
</div>

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

CodePudding user response：

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 >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 >Result: <span id="result"></span></div>
</div>

CodePudding user response：

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>