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
– Jeremy J Starcher, Commented Mar 12, 2014 at 8: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
– Jeremy J Starcher, Commented Mar 12, 2014 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
– user3239311, Commented Mar 13, 2014 at 4:10

Johan · Accepted Answer · 2014-03-13 08:50:57Z

1

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

edited Mar 13, 2014 at 8:50

answered Mar 12, 2014 at 9:05

Johan

1,0268 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Johan Over a year ago

@user3239311 you're right, the JsFiddle didn't work. I've updated the JsFiddle now (same code, just different JsFiddle setup)

user3239311 Over a year ago

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?

Community · Accepted Answer · 2017-05-23 12:27:07Z

1

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";
}

edited May 23, 2017 at 12:27

CommunityBot

11 silver badge

answered Mar 12, 2014 at 8:58

Ashoka Mondal

1,1714 gold badges12 silver badges28 bronze badges

1 Comment

user3239311 Over a year ago

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?

Collectives™ on Stack Overflow

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

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related