JavaScript/jQuery: Subtract hours and minutes

Question

What I have:

Three time inputs consisting of a start time, end time and the difference between the two.

<input type="time" name="starttime" id="starttime">
<input type="time" name="endtime" id="endtime">
<input type="time" name="duration" id="duration" disabled>

What I need:

When the start or end time changes, the difference shows in the third input.

e.g. 23:15 - 20:00 = 03:15.

What I've tried:

So far, I can only produce the correct hours but not the minutes.

<script>
    jQuery(document).ready(function($) {

        function calculateTime() {

        // Get values.
        var valuestart = $("#starttime").val();
        var valuestop = $("#endtime").val();

        // Create date format.          
        var timeStart = new Date("01/01/2007 " + valuestart);
        var timeEnd = new Date("01/01/2007 " + valuestop);

        // Subtract.
        var difference = timeEnd - timeStart;             

        // Attempt 1: Only gets hours.
        //var difference_as_hours = difference / 60 / 60 / 1000;
        //alert("Hour Difference: " + difference_as_hours); 

        // Attempt 2: Nothing happens.
        //var difference_as_hours_and_minutes = difference.getHours() + ":" + difference.getMinutes(); 
        //alert("Hour And Minutes Difference: " + difference_as_hours_and_minutes); 

        // Attempt 3: Nothing happens.
        //var difference_as_date = new Date("01/01/2007 " + difference);
        //var difference_as_hours_and_minutes = difference_as_date.getHours() + ":" + difference_as_date.getMinutes(); 
        //alert("Hour And Minutes Difference: " + difference_as_hours_minutes); 

        // Attempt 4: Nothing happens.
        var formatted_time = time_format(difference);
        alert(formatted_time);


        }
        $("#starttime, #endtime").change(calculateTime);
        calculateTime();


    });


    function time_format(d) {
        hours = format_two_digits(d.getHours());
        minutes = format_two_digits(d.getMinutes());
        seconds = format_two_digits(d.getSeconds());
        return hours + ":" + minutes + ":" + seconds;
    }

    function format_two_digits(n) {
        return n < 10 ? "0" + n : n;
    }


</script>

How can I produce the hours and minutes?

Please mention `valuestart` and `valuestop` in your question. Also tell the expected output format — Vikasdeep Singh, Jun 19 '18 at 02:51
@VicJordan I had looked through the documentation for momentjs but couldn't find an obvious example of subtracting hours and minutes. — Clarus Dignus, Jun 19 '18 at 02:53
Please mention `valuestart` and `valuestop` in your question. Also tell the **expected output format** — Vikasdeep Singh, Jun 19 '18 at 02:54
@VicJordan I've added the expected output format under "What I need". It's not clear to me how you want me to mention `valuestart` and `valuestop` beyond each appearing in my code. — Clarus Dignus, Jun 19 '18 at 02:57
Check my answer now. Updated as per the information you provided, — Vikasdeep Singh, Jun 19 '18 at 03:02

Vikasdeep Singh · Accepted Answer · 2018-06-19T03:01:57.903

6

Check below working Demo using momentjs:

let valuestart = moment.duration("20:00", "HH:mm");
let valuestop = moment.duration("23:15", "HH:mm");
let difference = valuestop.subtract(valuestart);

console.log(difference.hours() + ":" + difference.minutes())

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js"></script>

edited Jun 19 '18 at 03:01

answered Jun 19 '18 at 02:56

Vikasdeep Singh

20,983
15
78
104

Is there any way to pad the hours and minutes each with a leading zero when the value is less than 10? E.g. 3:15 as 03:15. E.g. 1:1 as 01:01. Is this something moment.js can format? – Clarus Dignus Jun 19 '18 at 03:37
1

Figured it out: `(difference.hours() < 10 ? "0" : "") + difference.hours()`. – Clarus Dignus Jun 19 '18 at 03:44
1

An answer that depends on a library not tagged or mentioned in the OP is not much better than simply saying "use library ". A non–library solution is just a few lines of code, no need for 4k lines of library. – RobG Jun 19 '18 at 08:51

Tran Audi · Answer 2 · 2018-06-19T03:20:49.933

You try

function calculateTime() {
    // Get values.
    var valuestart = $("#starttime").val();
    var valuestop = $("#endtime").val();

    // Create date format.          
    var timeStart = new Date("01/01/2007 " + valuestart);
    var timeEnd = new Date("01/01/2007 " + valuestop);

    // Subtract.
    var difference = timeEnd - timeStart;

    var time = msToTime(difference);
    console.log(time);

}

function msToTime(s) {
    var ms = s % 1000;
    s = (s - ms) / 1000;
    var secs = s % 60;
    s = (s - secs) / 60;
    var mins = s % 60;
    var hrs = (s - mins) / 60;

    return hrs + ':' + mins + ':' + secs + '.' + ms;
}

$("#starttime, #endtime").change(calculateTime);

Creating Dates using non-standard strings is not a good idea, see [*Why does Date.parse give incorrect results?*](https://stackoverflow.com/questions/2587345/why-does-date-parse-give-incorrect-results) — RobG, Jun 19 '18 at 08:45

JavaScript/jQuery: Subtract hours and minutes

What I have:

What I need:

What I've tried:

2 Answers2