Надстройка jQuery timepicker для ограничения поля end_time

Я использую надстройку jQuery timepicker (https://github.com/trentrichardson/jQuery-Timepicker-Addon) на 2 файлах с идентификаторами #start_time и #end_time. Я хочу, чтобы #end_time было больше или начиналось с момента #start_time. Я пробовал код ниже, но я плохо разбираюсь в jQuery.

$(function() {
$('#start_time').timepicker({ 
    onClose: function(timeText, inst) {
        if ($('#end_time').val() != '') {
            var testStartTime = $('#start_time').timepicker('getTime');
            var testEndTime = $('#end_time').timepicker('getTime');
            if (testStartTime > testEndTime)
                $('#end_time').timepicker('setTime', testStartTime);
        }
        else {
            $('#end_time').val(timeText);
        }
    },
    onSelect: function (selectedTime){
        $('#end_time').timepicker('option', 'minTime', $('#start_time').timepicker('getTime') );
    }
});
$('#end_time').timepicker({ 
    onClose: function(timeText, inst) {
        if ($('#start_time').val() != '') {
            var testStartTime = $('#start_time').timepicker('getTime');
            var testEndTime = $('#end_time').timepicker('getTime');
            if (testStartTime > testEndTime)
                $('#start_time').timepicker('setTime', testEndTime);
        }
        else {
            $('#start_time').val(timeText);
        }
    },
    onSelect: function (selectedTime){
        $('#start_time').timepicker('option', 'maxTime', $('#end_time').timepicker('getTime') );
    }
});
});

У меня есть два входа времени start_time и end_time.


jquery timepicker datetimepicker jquery-ui
person Saleem    schedule 13.10.2012    source источник
comment
Можете ли вы указать URL-адрес для используемого таймпикера? Я думаю, что их больше, чем один.   -  person BobS    schedule 13.10.2012
comment
Я использую github.com/trentrichardson/jQuery-Timepicker-Addon   -  person Saleem    schedule 13.10.2012
comment
Я не уверен, правильно ли я понял, но вы пытаетесь сравнить время начала и время окончания и убедитесь, что время окончания больше, чем время начала?   -  person Wern Ancheta    schedule 13.10.2012

Ответы (3)


arrow_upward
2
arrow_downward

Попробуйте эту рабочую демонстрацию, пожалуйста: http://jsfiddle.net/fMnw8/

Как это работает:

  • Пользователь не сможет выбрать end_time, пока вы не выберете start_time
  • Затем он проверил соответствие AM & PM и дальнейшее условие.

Это даст вам достаточно подсказок, чтобы поиграть.

Надеюсь, это подойдет вашему делу :)

код

$(function() {
    $('#start_time').timepicker({
        timeFormat: 'hh:mm TT',
        ampm: true,
        hour: 10,
        onSelect: function(selectedTime) {
            sHours = parseInt(selectedTime.substring(0, 2));
            sMins = parseInt(selectedTime.substring(3, 6));
            sAmpm = selectedTime.substring(6, 8);

            if (sAmpm == 'PM') {
                sHours = sHours + 12;
            }

            $('#end_time').remove();
            start_val = $('#start_time').val();
            $('<input id="end_time" value="' + start_val + '"/>').timepicker({
                timeFormat: "hh:mm TT",
                hourMin: sHours,
                sMinutes: sMins,
                ampm: true,
                hour: 10,
                onSelect: function(selectedTime) {
                    eHours = parseInt(selectedTime.substring(0, 2));
                    eMins = parseInt(selectedTime.substring(3, 6));
                    eAmpm = selectedTime.substring(6, 8);

                    if (eAmpm == sAmpm) {
                        if (sHours > eHours || sMins > eMins) {
                            alert('Sorry -Time is greater then start time');
                            $('#end_time').val("");
                            return false;
                        }
                    }
                }
            }).insertAfter('#start_time');
        }
    });
});​
person Tats_innit    schedule 13.10.2012
comment
@Saleem heh :) Хорошо, вы включили исходники JQ, и если вы дадите мне знать, что не работает, то это будет круто :) - person Tats_innit; 13.10.2012

arrow_upward
2
arrow_downward

Я немного изменил вещь, и теперь она работает. Вот код

<script>
$(document).ready(function () {

$('#start_time').timepicker({ 
    timeFormat: "hh:mm TT",
    ampm: true,
    hourMin: 8,
    hourMax: 18,
    onClose: function(dateText, inst) {
        if ($('#end_time').val() != '') {
            var testStartTime = $('#start_time').datetimepicker('getDate');
            var testEndTime = $('#end_time').datetimepicker('getDate');
            if (testStartTime > testEndTime) {
                $('#end_time').timepicker('setDate', testStartTime); }
        }
        else {
            $('#end_time').val(dateText);
        }
    },
    onSelect: function (selectedDateTime){
        if (testStartTime > testEndTime) {
        $('#end_time').datetimepicker('option', 'minDate', $('#start_time').datetimepicker('getDate') );
        }
    }
});

$('#end_time').timepicker({ 
    timeFormat: "hh:mm TT",
    ampm: true,
    hourMin: 8,
    hourMax: 18,    
    onClose: function(dateText, inst) {
        if ($('#start_time').val() != '') {
            var testStartTime = $('#start_time').datetimepicker('getDate');
            var testEndTime = $('#end_time').datetimepicker('getDate');
            if (testStartTime > testEndTime) {
                $('#start_time').timepicker('setDate', testEndTime); }
        }
        else {
            $('#start_time').val(dateText);
        }
    },
    onSelect: function (selectedDateTime){
        if (testStartTime > testEndTime) {
        $('#start_time').datetimepicker('option', 'maxDate', $('#end_time').datetimepicker('getDate') );
        }
    }
});

});
</script>

Спасибо за помощь.

person Saleem    schedule 13.10.2012

arrow_upward
1
arrow_downward

Взгляните на https://stackoverflow.com/a/2694937/243639, чтобы начать работу. Особый интерес представляет строка, содержащая $('#endDate').datepicker("option", 'minDate', new Date(dateText));. Вы можете использовать новую дату в своей функции onSelect для одного таймпикера, чтобы установить minDate (или maxDate) для другого.

Timepicker является расширением jQuery datepicker, упомянутого в другом сообщении SO, поэтому решение должно применяться и к timepicker.

person BobS    schedule 13.10.2012
comment
Не забудьте выбрать наиболее подходящий для вас ответ :-) - person BobS; 27.12.2012