CODEWITHSUNDEEP
javascripthtml
Marvin
Marvin

Reputation: 123

Difference between two html time inputs

I try to calculate the difference between two HTML time input elements. At the moment that one of the times is changed, there has to be recalculated, unfortunately I can not do this for each other. Who can help me?

    <input type="time"  id="start" value="10:00" >
<input type="time" id="end" value="12:30" >

<input id="diff">


<script>
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;

document.getElementById("start").onchange = function() {diff(start,end)};
document.getElementById("end").onchange = function() {diff(start,end)};


function diff(start, end) {
    start = start.split(":");
    end = end.split(":");
    var startDate = new Date(0, 0, 0, start[0], start[1], 0);
    var endDate = new Date(0, 0, 0, end[0], end[1], 0);
    var diff = endDate.getTime() - startDate.getTime();
    var hours = Math.floor(diff / 1000 / 60 / 60);
    diff -= hours * 1000 * 60 * 60;
    var minutes = Math.floor(diff / 1000 / 60);

    return (hours < 9 ? "0" : "") + hours + ":" + (minutes < 9 ? "0" : "") + minutes;
}

document.getElementById("diff").value = diff(start, end);
</script>

Upvotes: 4

Views: 4619

Answers (3)

Khalid Ait tirite
Khalid Ait tirite

Reputation: 1

//You can create a function like this that returns the difference between two times in hours it accepts as parameters string in format time "hh:mm";

    function timeDiffInHours(time1, time2){
    time1Arr = time1.split(":");
    time1InMinutes = parseInt(time1Arr[0])*60+parseInt(time1Arr[1]);
    time2Arr = time2.split(":");
    time2InMinutes = parseInt(time2Arr[0])*60+parseInt(time2Arr[1]);
    diff = time2InMinutes - time1InMinutes;
    return Math.floor(100*diff/60)/100;
}

console.log(timeDiffInHours("08:30","18:30"); //Response : 10

Upvotes: 0

The Bomb Squad
The Bomb Squad

Reputation: 4337

This time difference code is amazing! So if all you need is for it to update itself, I copied and slightly remodeled your code for you. Again, your code is amazing :)

<input type="time"  id="start" value="10:00" >
<input type="time" id="end" value="12:30" >

<input id="diff">


<script>
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;

document.getElementById("start").onchange = function() {diff(start,end)};
document.getElementById("end").onchange = function() {diff(start,end)};


function diff(start, end) {
    start = document.getElementById("start").value; //to update time value in each input bar
    end = document.getElementById("end").value; //to update time value in each input bar
    
    start = start.split(":");
    end = end.split(":");
    var startDate = new Date(0, 0, 0, start[0], start[1], 0);
    var endDate = new Date(0, 0, 0, end[0], end[1], 0);
    var diff = endDate.getTime() - startDate.getTime();
    var hours = Math.floor(diff / 1000 / 60 / 60);
    diff -= hours * 1000 * 60 * 60;
    var minutes = Math.floor(diff / 1000 / 60);

    return (hours < 9 ? "0" : "") + hours + ":" + (minutes < 9 ? "0" : "") + minutes;
}

setInterval(function(){document.getElementById("diff").value = diff(start, end);}, 1000); //to update time every second (1000 is 1 sec interval and function encasing original code you had down here is because setInterval only reads functions) You can change how fast the time updates by lowering the time interval
</script>

Is this what you want, if not, tell me, I'll be happy to help with this magnificent code :)

Upvotes: 6

Biagio Boi
Biagio Boi

Reputation: 68

With your code, you get the value of start and end just one time..you have to get the value each time you want to calculate the difference

try to do

document.getElementById("start").onchange = function() {
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
diff(start,end)};

and the same thing for the other element.

Upvotes: 1

Related Questions