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>

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>

• javascript
• html

• You need to pull the value of start and end every time the change event occurs, not once, before they are set. – Heretic Monkey Commented Feb 12, 2019 at 21:32
• How can I do that? :) – Marvin Commented Feb 12, 2019 at 21:37
• Well, think about it logically. What happens when the change event occurs? Right now, you're calling diff(start,end). If you needed to get the value of the start and end elements before that call, where would you think to put it? Perhaps before you call diff(start, end)... – Heretic Monkey Commented Feb 12, 2019 at 21:41

3 Answers 3

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 :)

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.

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