DateTimePicker UI - 限制时间选择器结束后的开始

时间:2015-10-18 19:40:13

标签: jquery jquery-ui datetimepicker timepicker

我有一个开始时间和结束时间输入框,使用datetimepicker-UI的时间选择器扩展名。

我试图制作,以便完成时间不能早于开始时间,但到目前为止我所有的配置选项都失败了。

这是我尝试使用网站上的示例:

$(document).ready(function() {
    $( "#theDate" ).datepicker({
        minDate: -0,
        showWeek: true,
        firstDay: 1,
        showOn: "both",
        buttonImage: "/assets/img/calendar.gif",
        buttonImageOnly: true,
        buttonText: "Select date",
        showButtonPanel: true,
        dateFormat: "dd/mm/yy "

    });
    //Time pickers
    $("#startTime").timepicker({
        //increment in 10mins
        //can't be sooner than now.
        controlType: 'select',
        oneLine: true,
        timeFormat: 'hh:mm tt'
    });


    $("#endTime").timepicker({
        //need to set the range to be AFTER startTime
        controlType: 'select',
        oneLine: true,
        timeFormat: 'hh:mm tt'
    });

    var $minimumStartTime = $("startTime").val();
    var $minimumEndTime = $("endTime").val();

    $.timepicker.timeRange(
            $minimumStartTime,
            $minimumEndTime,
            {
                minInterval: (1000*60*60), // 1hr
                timeFormat: 'HH:mm',
                start: {}, // start picker options
                end: {} // end picker options
            }
    )


});

它也包含了我的datePicker,工作正常。

非常感谢任何帮助。 感谢。

1 个答案:

答案 0 :(得分:0)

以下是另一个datepickers值的工作datepicker minDate的基本功能:http://jsfiddle.net/w0hgkzqf/

$('input.start').datepicker({
    onSelect: function (dateText, obj) {
        $('input.end').datepicker('option', 'minDate', dateText);
    }
});
$('input.end').datepicker();