Is there a way to increment time using javascript?

Question

So I am storing times as '01:30:00'. I have a start time and a date time dropdown. I want the dropdown to be set to the start time + 1hr. Is there a way to add the time via javascript or jquery?

Here's my current code:

$(".start_time").change(function(){
        $(".end_time").val($(this).val());
});

Do both dropdowns have the same options in the same order? Are they both hourly? — p.campbell, May 16 '11 at 04:50
They both have the options in the same order. They are half hourly. so its 1am, 1:30am, etc — raeq, May 16 '11 at 04:51
Does this answer your question? [How to add 30 minutes to a JavaScript Date object?](https://stackoverflow.com/questions/1197928/how-to-add-30-minutes-to-a-javascript-date-object) — Liam, Jul 11 '22 at 16:06

score 3 · Accepted Answer · edited May 16 '11 at 05:41

3

Try this:

find the selected index of the start time
bump it up by 2 to find your end time index (given that you've got half hour increments)
use the mod operator % to wrap back to index 0 or 1 (for 00:00 and 00:30 respectively)

$(".start_time").change(function(){
        var sel =$(this).attr('selectedIndex');
        var endIdx = (sel + 2) % 48; // 47 is 23:30, so 48 should go back to index 0
        $(".end_time").attr('selectedIndex', endIdx);        
});

Try it out on JSBin.

edited May 16 '11 at 05:41

Domenic

110,262
41
219
271

answered May 16 '11 at 04:56

p.campbell

98,673
67
256
322

Pretty clever (+1), but don't forget to mod by the number of select options so that if they pick the last or second-to-last option it wraps back around. – Domenic May 16 '11 at 05:03
@Dom: thanks; I'd forgotten about that; thanks for the suggestion! – p.campbell May 16 '11 at 05:09
1

may I suggest, instead of the if and the minus, just `endIdx = (sel + 2) % 47`? – Domenic May 16 '11 at 05:34
@Dom: wow, good stuff on a Sun evening. Love it! Please feel free to edit this answer with your suggestion! – p.campbell May 16 '11 at 05:37
done! It was `48` actually after I thought about it for a bit, heh. – Domenic May 16 '11 at 05:41

Domenic · Answer 2 · 2011-05-16T05:02:35.883

There are two separate problems here: the first is parsing out the time from your .start_time input, and the second is incrementing it to be an hour later.

The first is really a string-manipulation exercise. Once you have parsed out the pieces of the string, e.g. via a regex, you could either turn them into a Date instance and use setHours, or you could just manipulate the components as numbers and them reassemble them into a string in the format you desire.

An example of this might be as follows:

var TIME_PARSING_REGEX = /([0-9]{2}):([0-9]{2}):([0-9]{2})/;

function padToTwoDigits(number) {
    return (number < 10 ? "0" : "") + number;
}

$(".start_time").change(function () {
    var stringTime = $(this).val();
    var regexResults = TIME_PARSING_REGEX.exec(stringTime);

    var hours = parseInt(regexResults[1], 10);
    var newHours = (hours + 1) % 24;

    var newHoursString = padToTwoDigits(newHours);
    var minutesString = regexResults[2];
    var secondsString = regexResults[3];

    var newTimeString = newHoursString + ":" + minutesString + ":" + secondsString;
    $(".end_time").val(newTimeString);
});

score 0 · Answer 3 · answered May 16 '11 at 04:52

0

Basic example...

var date = new Date();
var h = date.getHours() + 1;
var m = date.getMinutes();
var s = date.getSeconds();
alert('One hour from now: ' + h + ':' + m + ':' + s);

Demo: http://jsfiddle.net/fBaDM/2/

answered May 16 '11 at 04:52

wdm

7,121
1
27
29

score 0 · Answer 4 · answered May 16 '11 at 04:54

After you parse you date/time string, you can use methods such as .setHours in your date object (more info at Mozilla Developer Center).

I highly recommend the DateJS library for working with date and time. I'm sure it'll be very handy for you.

protip: try to avoid replacing JavaScript with "jQuery markup"; it's all JS, after all. :)

Is there a way to increment time using javascript?

4 Answers4