Pre-select time with a Select2 component

Question

I'm new to JavaScript (from Flex). I'm using a Select2 component to show time of day in 15 minute increments:

<select id="e2" style="width:125px">
    <option value="00:00:00">12:00 AM</option>
    <option value="00:15:00">12:15 AM</option>
    <option value="00:30:00">12:30 AM</option>
    <option value="00:45:00">12:45 AM</option>
    <option value="01:00:00">1:00 AM</option>
    <option value="01:15:00">1:15 AM</option>
    <option value="01:30:00">1:30 AM</option>
    <option value="01:45:00">1:45 AM</option>
</select>

What I want is to pre-select the time that most closely matches the current time (in the future); for example, if it's 12:02 now, I want 12:15 selected (not 12:00).

My question is how and where to do that using Select2.

Do I use the "init selection" method when I initialize the component:

$( '#e2' ).select2();

Or is it better to do something else?

Here's the current method I use (in Flex) to set the date. I'm just a little unsure of where to do this with a Select2 component.

Any tips are greatly appreciated. Thank you!

Answer 1

For what you need to achieve, I would say the best way is to create your own function to find the closest time slot and then format the string to match your Select option values.

Below is the sample code (you need to format it as you need) but it works for me for current time here:

Sample: http://jsfiddle.net/ZC5tG/

HTML

    <select id="e2" style="width:125px">
        <option value="12:00:00">12:00 AM</option>
        <option value="12:15:00">12:15 AM</option>
        <option value="12:30:00">12:30 AM</option>
        <option value="12:45:00">12:45 AM</option>
        <option value="01:00:00">1:00 AM</option>
        <option value="01:15:00">1:15 AM</option>
        <option value="01:30:00">1:30 AM</option>
        <option value="01:45:00">1:45 AM</option>
    </select>

jQuery

<script>
    function getNearestTimeSlotString() {
        var now = new Date();
        var hour = now.getHours();
        var minutes = now.getMinutes();
        var ampm = "AM";
        if (minutes < 15) {
            minutes = "00";
        } else if (minutes < 30){
            minutes = "15";
        }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 + ":00");
    }
$(document).ready(function(e) {
    alert(getNearestTimeSlotString());
    $("#e2").val(getNearestTimeSlotString);
});