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>

Answer 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 :-)

Answer 2

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