jQuery UI-根据其他时间选择器值在时间选择器上设置minTime [英] JQuery UI - Set minTime on timepicker based on other timepicker value

问题描述

我正在尝试根据我在开始时间 timepicker中选择的内容来设置结束时间 timepicker的minTime. /p>

基于常规datepicker的某些功能，我有此功能，但它不起作用.

$('#confirmed_time_start').timepicker({
    timeFormat: 'hh:mm',
    stepHour: 1,
    stepMinute: 15,
    hour: 8,
    minute: 0,
    hourMin: 8,
    hourMax: 18,
    onSelect: function(timeStr) {

        var newTime = $(this).timepicker('getDate');
        if (newTime) { // Not null
        newTime.setDate(newTime.getDate());
        }
        $('#confirmed_time_end').timepicker('minTime', newTime)
        }

    });

$('#confirmed_time_end').timepicker({
    timeFormat: 'hh:mm',
    stepHour: 1,
    stepMinute: 15,
    hour: 8,
    minute: 0,
    hourMin: 8,
    hourMax: 18 
    });

我收到的错误是:

对象不支持此属性或方法

解决方案

var time = new Date();
$('#from').timepicker({
    ampm: true,
    hourMin: 9,
    hourMax: 19,
    timeFormat: 'hh:mm TT',
    onClose: function(dateText, inst) {
        var startDateTextBox = $('#to');
        if (startDateTextBox.val() != '') {
            var testStartDate = new Date(startDateTextBox.val());
            var testEndDate = new Date(dateText);
            if (testStartDate > testEndDate)
                startDateTextBox.val(dateText);
        }
        else {
            startDateTextBox.val(dateText);
        }
    },
    onSelect: function(dateText){
        var time = new Date($(this).datetimepicker('getDate').getTime());
        $('#to').timepicker('option', 'minDateTime',time);
    }
});
$('#to').timepicker({
    ampm: true,
    hourMin: 10,
    hourMax: 21,
    timeFormat: 'hh:mm TT',
    onClose: function(dateText, inst) {
        var startDateTextBox = $('#from');
        if (startDateTextBox.val() != '') {
            var testStartDate = new Date(startDateTextBox.val());
            var testEndDate = new Date(dateText);
            if (testStartDate > testEndDate)
                startDateTextBox.val(dateText);
        }
        else {
            startDateTextBox.val(dateText);
        }
    },
    onSelect: function(dateText){
        var time = new Date($(this).datetimepicker('getDate').getTime());
        $('#from').timepicker('option', 'maxDateTime',time);
    }
});

I'm trying to set the minTime of my End Time timepicker based on what I've selected in the Start Time timepicker.

I have this, based on something that works for the regular datepicker, but it's not working.

$('#confirmed_time_start').timepicker({
    timeFormat: 'hh:mm',
    stepHour: 1,
    stepMinute: 15,
    hour: 8,
    minute: 0,
    hourMin: 8,
    hourMax: 18,
    onSelect: function(timeStr) {

        var newTime = $(this).timepicker('getDate');
        if (newTime) { // Not null
        newTime.setDate(newTime.getDate());
        }
        $('#confirmed_time_end').timepicker('minTime', newTime)
        }

    });

$('#confirmed_time_end').timepicker({
    timeFormat: 'hh:mm',
    stepHour: 1,
    stepMinute: 15,
    hour: 8,
    minute: 0,
    hourMin: 8,
    hourMax: 18 
    });

The error I'm receiving is:

Object doesn't support this property or method

解决方案

var time = new Date();
$('#from').timepicker({
    ampm: true,
    hourMin: 9,
    hourMax: 19,
    timeFormat: 'hh:mm TT',
    onClose: function(dateText, inst) {
        var startDateTextBox = $('#to');
        if (startDateTextBox.val() != '') {
            var testStartDate = new Date(startDateTextBox.val());
            var testEndDate = new Date(dateText);
            if (testStartDate > testEndDate)
                startDateTextBox.val(dateText);
        }
        else {
            startDateTextBox.val(dateText);
        }
    },
    onSelect: function(dateText){
        var time = new Date($(this).datetimepicker('getDate').getTime());
        $('#to').timepicker('option', 'minDateTime',time);
    }
});
$('#to').timepicker({
    ampm: true,
    hourMin: 10,
    hourMax: 21,
    timeFormat: 'hh:mm TT',
    onClose: function(dateText, inst) {
        var startDateTextBox = $('#from');
        if (startDateTextBox.val() != '') {
            var testStartDate = new Date(startDateTextBox.val());
            var testEndDate = new Date(dateText);
            if (testStartDate > testEndDate)
                startDateTextBox.val(dateText);
        }
        else {
            startDateTextBox.val(dateText);
        }
    },
    onSelect: function(dateText){
        var time = new Date($(this).datetimepicker('getDate').getTime());
        $('#from').timepicker('option', 'maxDateTime',time);
    }
});

这篇关于jQuery UI-根据其他时间选择器值在时间选择器上设置minTime的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！