2

我在 2 个具有 #start_time 和 #end_time id 的文件上使用 jQuery timepicker 插件（ 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。

4

4 回答 4

3 
        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') );
            }
        });
于 2012-12-10T09:31:35.427 回答
2

I have modified few thing and its working now. Here is the code

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

Thanks for help.

于 2012-10-13T04:42:00.210 回答
2

请尝试这个工作演示：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');
        }
    });
});​
于 2012-10-13T04:17:31.847 回答
1

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

timepicker 是另一个 SO 帖子中提到的 jQuery datepicker 的扩展，因此该解决方案也应该适用于 timepicker。

于 2012-10-13T03:56:02.663 回答