Question

我在#start_time和#end_time ids的2个文件上使用jQuery timepicker addon（https://github.com/trentrichardson/jQuery-Timepicker-Addon）。我希望#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。

Answer 1

        var startDateTextBox = $('#dialog_missionAdd input[name=scheduleStarttime]');
        var endDateTextBox = $('#dialog_missionAdd input[name=scheduleEndtime]');

        startDateTextBox.timepicker({ 
            defaultValue: "00:00",
            timeFormat: "HH:mm",
            onClose: function(dateText, inst) {
                if (endDateTextBox.val() != '') {
                    var testStartTime = startDateTextBox.datetimepicker('getDate');
                    var testEndTime = endDateTextBox.datetimepicker('getDate');
                    if (testStartTime > testEndTime) {
                        endDateTextBox.timepicker('setDate', testStartTime); }
                }
                else {
                    endDateTextBox.val(dateText);
                }
            },
            onSelect: function (selectedDateTime) {
                endDateTextBox.datetimepicker('option', 'minDate', startDateTextBox.datetimepicker('getDate') );
            }
        });

        endDateTextBox.timepicker({ 
            defaultValue: "00:00",
            timeFormat: "HH:mm", 
            onClose: function(dateText, inst) {
                if (startDateTextBox.val() != '') {
                    var testStartTime = startDateTextBox.datetimepicker('getDate');
                    var testEndTime = endDateTextBox.datetimepicker('getDate');
                    if (testStartTime > testEndTime) {
                        startDateTextBox.timepicker('setDate', testEndTime); }
                }
                else {
                    startDateTextBox.val(dateText);
                }
            },
            onSelect: function (selectedDateTime) {
                startDateTextBox.datetimepicker('option', 'maxDate', endDateTextBox.datetimepicker('getDate') );
            }
        });

Answer 2

请尝试工作演示：http://jsfiddle.net/fMnw8/

工作原理：

在您选择end_time

start_time

然后，它检查了AM＆amp; 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');
        }
    });
});

Answer 3

我已经修改了一些东西并且现在正在工作。这是代码

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

感谢您的帮助。

Answer 4

立即查看https://stackoverflow.com/a/2694937/243639即可开始使用。特别感兴趣的是包含$('#endDate').datepicker("option", 'minDate', new Date(dateText));的行。您可以在onSelect函数中使用新日期作为一个时间戳，以设置另一个的minDate（或maxDate）。

timepicker是另一个SO帖子中引用的jQuery datepicker的扩展，所以解决方案也应该适用于timepicker。

jQuery timepicker addon来限制end_time字段

4 个答案: