How to add two input time values and display it in another input box?

Question

I am getting two durations, current time and previous time from user. now, i want to calculate the total time show it on the third textbox.

<p><span>Current Duration</span><input id="txt1" onblur="sum();" type="text" autocomplete="off" name="current_duration" value="" /></p>
<p><span>Previous Duration</span><input id="txt2" onblur="sum();" type="text" autocomplete="off" name="previous_duration" value="" /></p>
<p><span>Total Duration</span><input id="txt3" type="text" readonly autocomplete="off" name="total_duration" value="" /></p>
<script>

    function sum() {
        var txtFirstNumberValue = document.getElementById('txt1').value;
        var txtSecondNumberValue = document.getElementById('txt2').value;

        var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue);
        if (!isNaN(result)) {
            document.getElementById('txt3').value = result;

        }
    }
</script>

How can i implement the same? can you guys help me out?

What format is the time be entered in? Number of seconds? Number of miliseconds? `hh:mm:ss` format? — Jeremy J Starcher, Mar 12 '14 at 08:55
Read in the time, then `split` the input on the `:`. `totalMinutes = (hours * 60) + minutes`. That gives you the duration, in minutes. Once you have the totals, it is easy enough to go backwards. `hours = Math.floor(grandTotalMinutes / 60); minutes = grandTotalMinutes % 60;` — Jeremy J Starcher, Mar 12 '14 at 13:57
i don't want to use the input type as time. instead i want to use something else. so what can i use? do you have any idea? — user3239311, Mar 13 '14 at 04:10

score 1 · Answer 1 · edited May 23 '17 at 12:27

I have find this from SO.

You can try this:

function sum()
{
var datetime = document.getElementById('txt1').value;
var txtSecondNumberValue = document.getElementById('txt2').value;
var datetime = new Date(datetime).getTime();
var now = new Date(txtSecondNumberValue).getTime();

if( isNaN(datetime) )
{
    return "";
}

console.log( datetime + " " + now);

if (datetime < now) {
var milisec_diff = now - datetime;
}else{
var milisec_diff = datetime - now;
}

var days = Math.floor(milisec_diff / 1000 / 60 / (60 * 24));

var date_diff = new Date( milisec_diff );

return days + "d "+ (date_diff.getHours() - 5) + "h " + (date_diff.getMinutes() - 30) + "m";
}

i don't want to use input type as time. instead i want to get the input from user like (1.30 or 01.30 ). do you have any idea? — user3239311, Mar 13 '14 at 04:19

Johan · Accepted Answer · 2014-03-13T08:50:57.217

Assumning the separator between time and minutes is '.', this will work. If another separator i needed, just replace the character in toTime() and fromTime()

<p><span>Current Duration</span><input id="txt1" onblur="sum();" type="text" autocomplete="off" name="current_duration" value="" /></p>
<p><span>Previous Duration</span><input id="txt2" onblur="sum();" type="text" autocomplete="off" name="previous_duration" value="" /></p>
<p><span>Total Duration</span><input id="txt3" type="text" readonly autocomplete="off" name="total_duration" value="" /></p>

<script>
function sum() {
    var txtFirstNumberValue = document.getElementById('txt1').value;
    var txtSecondNumberValue = document.getElementById('txt2').value;

    var result = fromTime(txtFirstNumberValue) + fromTime(txtSecondNumberValue);

    if (!isNaN(result)) {
        document.getElementById('txt3').value = toTime(result);
    }
}

function fromTime(time) {
    var timeArray = time.split('.');
    var hours = parseInt(timeArray[0]);
    var minutes = parseInt(timeArray[1]);

    return (hours * 60) + minutes;
}

function toTime(number) {
    var hours = Math.floor(number / 60);
    var minutes = number % 60;

    return hours + "." + (minutes <= 9 ? "0" : "") + minutes;
}
</script>

JsFiddle

@user3239311 you're right, the JsFiddle didn't work. I've updated the JsFiddle now (same code, just different JsFiddle setup) — Johan, Mar 12 '14 at 11:09
i don't want to use input type as time. instead i want to get the input from user like (1.30 or 01.30 ). do you have any idea? — user3239311, Mar 13 '14 at 04:19

How to add two input time values and display it in another input box?

2 Answers2