[英]Bootstrap datetimepicker disable future date and time
I am trying to disable future hours within today using disabledTimeIntervals
but it doesn't seem to work.我试图在今天使用
disabledTimeIntervals
禁用未来的时间,但它似乎不起作用。
What I need to do is disable future hours in timepicker for today only, because disabling dates I can do with maxDate.我需要做的是仅在今天禁用 timepicker 中的未来小时数,因为禁用日期我可以用 maxDate 来完成。
<input class="form-control input-sm pull-left " id="dp" placeholder="To" type="text">
$('#dp').datetimepicker({
maxDate: '0',
disabledTimeIntervals: [[moment(), moment().hour(24).minutes(0).seconds(0)]],
format: 'm/d/Y H:i A',
timepicker: true,
});
JSFIDDLE: https://jsfiddle.net/3oxmccjq/1/ JSFIDDLE: https ://jsfiddle.net/3oxmccjq/1/
You can use maxTime
option and function onChangeDateTime
to set the minTime according to the selected date.您可以使用
maxTime
选项和函数onChangeDateTime
根据所选日期设置 minTime。
var today = new Date(); var options = { maxDate: new Date(), maxTime: new Date(), disabledTimeIntervals: [ [moment(), moment().hour(24).minutes(0).seconds(0)] ], format: 'm/d/YH:i A', timepicker: true, onChangeDateTime: function(date) { // Here you need to compare date! this is up to you :-) if (date.getDate() === today.getDate()) { this.setOptions({maxTime: new Date()}); } else { this.setOptions({maxTime: false}); } } }; $('#dp').datetimepicker(options);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/build/jquery.datetimepicker.full.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.2.1/moment.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.4/jquery.datetimepicker.css" rel="stylesheet" /> <input class="form-control input-sm pull-left " id="dp" placeholder="To" type="text">
The datetimepicker you are using in your jsfiddle have no options as disabledTimeIntervals
and that's why it is not working.您在 jsfiddle 中使用的 datetimepicker 没有作为
disabledTimeIntervals
选项,这就是它disabledTimeIntervals
的原因。 You should use disabledMinTime
& disabledMaxTime
你应该使用
disabledMinTime
和disabledMaxTime
As for the solution I am guessing you want to disable all future hours for today but still want to allow future dates with all the possible time.至于解决方案,我猜您想禁用今天的所有未来时间,但仍希望在所有可能的时间内允许未来的日期。 Here is a jsfiddle for same :-
这是相同的jsfiddle:-
https://jsfiddle.net/sahilbatla/zpzL2po3/ https://jsfiddle.net/sahilbatla/zpzL2po3/
Code looks like this :-代码如下所示:-
var today = new Date();
var todayEndOfDay = new Date().setHours(23,59,59,999);
$('#dp').datetimepicker({
disabledMinTime: today,
disabledMaxTime: todayEndOfDay,
format: 'm/d/Y H:i A',
timepicker: true,
onChangeDateTime: function(date) {
if (date.getDate() !== today.getDate()) {
this.setOptions({disabledMinTime: false, disabledMaxTime: false})
} else {
this.setOptions({disabledMinTime: today, disabledMaxTime: todayEndOfDay})
}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.