Processing formatted time with Javascript

Question

Lets say I have start of and duration of a TV program with this format: 10:05.
What I want to do is when someone is entering programs data and he enters start time and duration of a program, my code will add them together and fill the next program's start time automatically.

I was trying to convert these times to seconds and then after manipulation convert them to formatted time again, but I don't know how can I do that.

function processTime(time) {    
    if (typeof time !== 'undefined') {
        var times = time.split(":");
        var minutes = times[0];
        var seconds = times[1];
        seconds = parseInt(seconds, 10) + (parseInt(minutes, 10) * 60);
    } else {
        var seconds = null;
    }
    return seconds;
}

function createTime(timestamp) {
    var output;
    if (typeof timestamp !== 'undefined') {
        // Problem is here, my timestamp is not standard unix timestamp
        var time = new Date(timestamp * 1000);
        var minutes = time.getMinutes();
        var seconds = time.getSeconds();
        output = minutes + ":" + seconds;
    }
    return output;
}

$progForm.delegate(".program-duration", 'keyup', function() {
        $(this).on('focusout', function() {
            var duration = processTime($(this).val());
            var startTime = processTime($(this).parent().prev().find(".program-time").val());
            if (duration && typeof duration !== 'undefined' && startTime && typeof startTime !== 'undefined') {
                var nextStart = duration + startTime;
                var $nextProgramTime = $(this).parent().parent().next().find(".program-time");
                if (parseInt($nextProgramTime.val()) < 1) {
                    $nextProgramTime.val(createTime(nextStart));
                }
            }
        });
    });

<form>
    <table>
        <tbody class="programs-inputs">
            <tr>
                <td><input type="text" class="program-time timepicker input-mini" name="programs[time][]" placeholder="00:00" /></td>
                <td><input type="text" class="program-duration timepicker input-mini" name="programs[duration][]" placeholder="00:00" /></td>
            </tr>
            <tr>
                <td><input type="text" class="program-time timepicker input-mini" name="programs[time][]" placeholder="00:00" /></td>
                <td><input type="text" class="program-duration timepicker input-mini" name="programs[duration][]" placeholder="00:00" /></td>
            </tr>
        </tbody>
    </table>
</form>

I think if you just have a duration you could instantiate a date with 0 for the values you don't need: var d = new Date(0, 0, 0, hours, minutes, seconds, milliseconds); — Andrew Walters
– Andrew Walters, Commented Apr 22, 2013 at 21:54
What I've told you: you are living in a timezone that is some-and-a-half hours away from UTC! Use getUTCMinutes() to fix that bug :-) — Bergi
– Bergi, Commented Apr 22, 2013 at 22:32
@faridv: Notice that they're offset with your local timezone as well - beware of exchanging them with the server. You'd better be using Date.UTC(0, 0, 0, hours, minutes, seconds, milliseconds); — Bergi
– Bergi, Commented Apr 22, 2013 at 22:43

Bergi · Accepted Answer · 2013-04-22 22:35:40Z

1

Just use the inverse of your processTime algorithm:

function createTime(timestamp) {
    if (typeof timestamp == 'number') {
        var seconds = timestamp % 60;
        var minutes = (timestamp - seconds) / 60;
       return ("0"+minutes).slice(-2) + ":" + ("0"+seconds).slice(-2);
    }
}

Your original attempt was on the right way, only it was not timezone-proof. While new Date(timestamp * 1000); constructs a value for milliseconds from Jan 01 1970 00:00:00 UTC, the getMinutes() and getSeconds() methods will return the values for that timestamp in your current, local timezone - which can be half an hour off. Switch to their UTC equivalents (.getUTCMinutes(), .getUTCSeconds()) and it will work. Using the solution with Date objects will save you much trouble once you need to include hours, or maybe even full dates :-)

edited Apr 22, 2013 at 22:35

answered Apr 22, 2013 at 22:00

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

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

Comments

Reason · Accepted Answer · 2013-04-22 22:05:37Z

1

A unix timestamp shows the time since new years 1970. Since you are only interested in time, not date, unix timestamps is probably not suitable. You can just do the reverse of what you did before.

var seconds = totalSeconds;
var hours = Math.floor(seconds / 3600);
seconds -= hours * 3600;
var minutes = Math.floor(seconds / 60);
seconds -= minutes * 60;

var timeString = leadingZero(hours) + ':' + leadingZero(minutes) + ':' + leadingZero(seconds);

This does not give you the leading zeroes, but that should be fairly easy to fix.

function leadingZero(num) {
    var str = '';
    if (num < 10) {
        str += '0';
    }
    return str + num;
}

edited Apr 22, 2013 at 22:05

answered Apr 22, 2013 at 21:59

Reason

1,43012 silver badges34 bronze badges

4 Comments

Farid Rn Over a year ago

Do you know how can I add leading zeros for numbers smaller than 10?

Reason Over a year ago

updated the answer to feature the leading zeroes. not very pretty, but it solves the problem :).

Farid Rn Over a year ago

thanks, I thought maybe there's a function in javascript to change to formatting of numbers like this.

Reason Over a year ago

don't think there is a standard way. there are some other questions, like this one: stackoverflow.com/questions/1267283/… trying to solve the same problem.

Collectives™ on Stack Overflow

Processing formatted time with Javascript

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related