datetimepicker日期时间选择设置时间间隔限制

571 阅读1分钟

jquery-ui-timepicker-addon.js 官网中有time ranges的例子。但想做限制结束日期选择的操作,如下图。

image.png image.png

下面是选择了开始时间后,结束时间会受到限制的实现,并且对开始日期不小于当前时间做了限制。

<input name="" type="text" class="form-control" id="datepicker_start" />    
<input name="" type="text" class="form-control" id="datepicker_end" />
var interval = 30
var startpicker = $("#datepicker_start");  
var endpicker = $("#datepicker_end");  
startpicker.datetimepicker({  
    minDate:0,  
    dateFormat: "yy-mm-dd",  
onSelect: function(selectedDate) {  
    var next = new Date(selectedDate);  
    next.setDate(next.getDate()+interval);  
    endpicker.datetimepicker('option', 'minDate', selectedDate);  
    endpicker.datetimepicker('option','maxDate',next);  
}});  
    endpicker.datetimepicker({  
    minDate:0,  
    dateFormat: "yy-mm-dd"  
})