Convert current time to nearest half hour

Question

I have a list of times displayed as radio buttons. I would like to use JavaScript to select the one closest to the users current time. I'm already using jquery on my site (if that matters). Also I have another set of radio buttons that I'd like to default to select to +3 hours from the "Earliest Acceptable Time".

<label for="select-choice-etime">Earliest acceptable time:</label>
<select name="select-choice-etime" id="select-choice-etime">
    <option value="12:00 AM">12:00 AM</option>
    <option value="12:30 AM">12:30 AM</option>
    <option value="1:00 AM">1:00 AM</option>
    <option value="1:30 AM">1:30 AM</option>
    <option value="2:00 AM">2:00 AM</option>
    <option value="2:30 AM">2:30 AM</option>
    <option value="3:00 AM">3:00 AM</option>
    <option value="3:30 AM">3:30 AM</option>
    <option value="4:00 AM">4:00 AM</option>
    <option value="4:30 AM">4:30 AM</option>
    <option value="5:00 AM">5:00 AM</option>
    <option value="5:30 AM">5:30 AM</option>
    <option value="6:00 AM">6:00 AM</option>
    <option value="6:30 AM">6:30 AM</option>
    <option value="7:00 AM">7:00 AM</option>
    <option value="7:30 AM">7:30 AM</option>
    <option value="8:00 AM">8:00 AM</option>
    <option value="8:30 AM">8:30 AM</option>
    <option value="9:00 AM">9:00 AM</option>
    <option value="9:30 AM">9:30 AM</option>
    <option value="10:00 AM">10:00 AM</option>
    <option value="10:30 AM">10:30 AM</option>
    <option value="11:00 AM">11:00 AM</option>
    <option value="11:30 AM">11:30 AM</option>
    <option value="12:00 PM">12:00 PM</option>
    <option value="12:30 PM">12:30 PM</option>
    <option value="1:00 PM">1:00 PM</option>
    <option value="1:30 PM">1:30 PM</option>
    <option value="2:00 PM">2:00 PM</option>
    <option value="2:30 PM">2:30 PM</option>
    <option value="3:00 PM">3:00 PM</option>
    <option value="3:30 PM">3:30 PM</option>
    <option value="4:00 PM">4:00 PM</option>
    <option value="4:30 PM">4:30 PM</option>
    <option value="5:00 PM">5:00 PM</option>
    <option value="5:30 PM">5:30 PM</option>
    <option value="6:00 PM">6:00 PM</option>
    <option value="6:30 PM">6:30 PM</option>
    <option selected="selected" value="7:00 PM">7:00 PM</option>
    <option value="7:30 PM">7:30 PM</option>
    <option value="8:00 PM">8:00 PM</option>
    <option value="8:30 PM">8:30 PM</option>
    <option value="9:00 PM">9:00 PM</option>
    <option value="9:30 PM">9:30 PM</option>
    <option value="10:00 PM">10:00 PM</option>
    <option value="10:30 PM">10:30 PM</option>
    <option value="11:00 PM">11:00 PM</option>
    <option value="11:30 PM">11:30 PM</option>
</select>

Answer 1

Assuming you want to round the minutes up to the nearest 00/30/60 you can use the ceiling function:

var now = new Date();
now.setMinutes(Math.ceil(now.getMinutes() / 30) * 30);

// Test cases:
// Math.ceil( 0 / 30) * 30 =  0
// Math.ceil( 1 / 30) * 30 = 30
// Math.ceil(30 / 30) * 30 = 30
// Math.ceil(31 / 30) * 30 = 60
// Math.ceil(59 / 30) * 30 = 60
//
// Note that setMinutes(60) increments the hour and sets the minute equal to zero

var h12h = now.getHours();
var m12h = now.getMinutes();
var ampm;
if (h12h >= 0 && h12h < 12) {
    if (h12h === 0) {
        h12h = 12; // 0 becomes 12
    }
    ampm = "AM";
}
else {
    if (h12h > 12) {
        h12h -= 12; // 13-23 becomes 1-11
    }
    ampm = "PM";
}
var timeString = h12h + ":" + ("00" + m12h).slice(-2) + " " + ampm;
$("#select-choice-etime").val(timeString);

Note: replace ceil with round to map minutes 00...14 to 00, 15...44 to 30 and 44...59 to 60.

Demo here

Answer 2

Here's a function to convert the current time to the nearest half hour in the form used in your options (e.g nearest "10:30 PM" type time) and then a way to use that time to select the proper option.

function getNearestHalfHourTimeString() {
    var now = new Date();
    var hour = now.getHours();
    var minutes = now.getMinutes();
    var ampm = "AM";
    if (minutes < 15) {
        minutes = "00";
    } else if (minutes < 45){
        minutes = "30";
    } else {
        minutes = "00";
        ++hour;
    }
    if (hour > 23) {
        hour = 12;
    } else if (hour > 12) {
        hour = hour - 12;
        ampm = "PM";
    } else if (hour == 12) {
        ampm = "PM";
    } else if (hour == 0) {
        hour = 12;
    }

    return(hour + ":" + minutes + " " + ampm);
}

You can select the desired option with this:

// remove any previous selection
$('#select-choice-etime option').removeAttr('selected');

// select the one that matches the current time
$('#select-choice-etime option[value="' + getNearestHalfHourTimeString() + '"]').attr('selected', 'selected');​

You can see it work here: http://jsfiddle.net/jfriend00/Zz7pW/