I have this function

function calculateTimes(firstDate, firstTime, secondDate, secondTime){
    var fDate = firstDate+" "+firstTime;
    var sDate = secondDate+" "+secondTime;

    var firstDateFull = new Date(fDate);
    var secondDateFull = new Date(sDate);

    var diff = secondDateFull - firstDateFull;

    var diffSeconds = diff / 1000;
    var HH = Math.floor(diffSeconds / 3600);
    var MM = Math.floor((diffSeconds % 3600) / 60);
    var SS = "00";

    var formatted = ((HH < 10) ? ("0" + HH) : HH) + ":" + ((MM < 10) ? ("0" + MM) : MM);

    return formatted;
}  

Which I use like this

    $('#uoc-r4disDate-fld, #uoc-r4disTime-fld, #uoc-disDate-fld, #uoc-disTime-fld').on('change', function() {
        $("#uoc-delay-fld").val(calculateTimes($("#uoc-r4disDate-fld").val(), $("#uoc-r4disTime-fld").val(), $("#uoc-disDate-fld").val(), $("#uoc-disTime-fld").val()));
    });

My problem is that this is a delay field and the hours can run up past 24h. Is there a way to make a Time field accept more than 24h in the hour in JavaScript? The database im using ( 4th Dimension ) can accept hours above 24h for exactly this type of situation I guess.

So, it need to be able to display - 26:34. Elapsed time in time format, like a stopwatch.

I have this function

function calculateTimes(firstDate, firstTime, secondDate, secondTime){
    var fDate = firstDate+" "+firstTime;
    var sDate = secondDate+" "+secondTime;

    var firstDateFull = new Date(fDate);
    var secondDateFull = new Date(sDate);

    var diff = secondDateFull - firstDateFull;

    var diffSeconds = diff / 1000;
    var HH = Math.floor(diffSeconds / 3600);
    var MM = Math.floor((diffSeconds % 3600) / 60);
    var SS = "00";

    var formatted = ((HH < 10) ? ("0" + HH) : HH) + ":" + ((MM < 10) ? ("0" + MM) : MM);

    return formatted;
}  

Which I use like this

    $('#uoc-r4disDate-fld, #uoc-r4disTime-fld, #uoc-disDate-fld, #uoc-disTime-fld').on('change', function() {
        $("#uoc-delay-fld").val(calculateTimes($("#uoc-r4disDate-fld").val(), $("#uoc-r4disTime-fld").val(), $("#uoc-disDate-fld").val(), $("#uoc-disTime-fld").val()));
    });

My problem is that this is a delay field and the hours can run up past 24h. Is there a way to make a Time field accept more than 24h in the hour in JavaScript? The database im using ( 4th Dimension ) can accept hours above 24h for exactly this type of situation I guess.

So, it need to be able to display - 26:34. Elapsed time in time format, like a stopwatch.

• javascript

• For such things use moment.js – Harry Joy Commented Oct 19, 2016 at 9:15
• 1 Possible duplicate of Work with a time span in Javascript – user247702 Commented Oct 19, 2016 at 9:16
• So, do you want to display "25h" or "1d 1h" instead…? Also, if you actually understand the algorithm you've implemented there, it shouldn't be too difficult to adjust it either way. – deceze ♦ Commented Oct 19, 2016 at 9:16
• Yeah, need to display 25h up – morne Commented Oct 19, 2016 at 9:28
• @deceze. Okay, you understand it so well that you care to explain? The DB CAN except a time format of 27:03, but JavaScript or HTML not. Im just asking a simple question. – morne Commented Oct 19, 2016 at 9:42

1 Answer 1

If I get everything right, than you are using <input type="time" /> as »timefield«. This input type is designed to handle day times, not time spans. Those daytimes can be formatted in 12, or 24 hour format, and they all describe a time of a day. Something like "35:54" is a timespan of 35 hours and 54 Minutes and cannot be used to describe a certain time of a day, so such a value is not valid for this type of input.

If you need an input for such values, you can of course use one <input type='text' />, or two <input type="number" />, one for the hours and one for the minutes, like so:

<div id="time-span">
    <input type="number" min="0" step="1" />:<input type="number" min="0" max="59" step="1" />
</div>