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

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

• javascript
• jquery

Share Improve this question Follow asked May 16, 2011 at 4:38 raeqraeq 97144 gold badges1515 silver badges3636 bronze badges 3

• Do both dropdowns have the same options in the same order? Are they both hourly? – p.campbell Commented May 16, 2011 at 4:50
• They both have the options in the same order. They are half hourly. so its 1am, 1:30am, etc – raeq Commented May 16, 2011 at 4:51
• Does this answer your question? How to add 30 minutes to a JavaScript Date object? – Liam Commented Jul 11, 2022 at 16:06

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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.

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

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/fBaDM/2/

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 remend 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. :)