Предварительно выберите время с помощью компонента Select2

Я новичок в JavaScript (из Flex). Я использую компонент Select2 для отображения времени суток с шагом 15 минут:

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

Я хочу предварительно выбрать время, которое наиболее точно соответствует текущему времени (в будущем); например, если сейчас 12:02, я хочу выбрать 12:15 (а не 12:00).

Мой вопрос в том, как и где это сделать с помощью Select2.

Использую ли я метод "init selection" при инициализации компонента:

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

Или лучше сделать что-то другое?

Вот текущий метод, который я использую (во Flex) для установки даты. Я просто немного не уверен, где это сделать с компонентом Select2.

Любые советы приветствуются. Благодарю вас!


javascript jquery jquery-select2
person fumeng    schedule 11.06.2013    source источник
comment
Вы читали документацию плагина Select2? Если нет, проверьте образцы здесь: ivaynberg.github.io/select2   -  person Learner    schedule 11.06.2013
comment
Да, именно поэтому мне захотелось использовать метод initSelection. Но когда я это прочитал, это больше похоже на утилиту сопоставления, а не на хорошее место для установки начального значения.   -  person fumeng    schedule 11.06.2013

Ответы (1)


arrow_upward
1
arrow_downward

Для того, что вам нужно достичь, я бы сказал, что лучший способ - создать свою собственную функцию, чтобы найти ближайший временной интервал, а затем отформатировать строку в соответствии со значениями параметра «Выбрать».

Ниже приведен пример кода (вам нужно отформатировать его по своему усмотрению), но он работает для меня в настоящее время здесь:

Образец: 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);
});

person Learner    schedule 11.06.2013
comment
Таким образом, initSelection слишком все усложнял. Все, что мне нужно, это установить .val(). Большое тебе спасибо!! - person fumeng; 11.06.2013