我知道这听起来很疯狂,但是我需要允许在这里选择禁用日期:
https://eonasdan.github.io/bootstrap-datetimepicker/
为什么?
我需要为预订的可能性上色的日期涂上日期,为需要预订的可能性更大的上色日期,所以我写:
<script>
$(function () {
$('#start').datetimepicker({
format: 'YYYY/MM/DD',
enabledDates: [
moment("05/21/2016"),
moment("05/22/2016"),
moment("05/23/2016"),
moment("05/24/2016"),
],
});
});
</script>
<style type="text/css">
.bootstrap-datetimepicker-widget table th.disabled,
.bootstrap-datetimepicker-widget table th.disabled:hover {
background: #FF9088 !!important;
border-radius: 0px !important;
color: #fff !important;
border: 1px solid #fff !important;
}
.bootstrap-datetimepicker-widget table td.disabled,
.bootstrap-datetimepicker-widget table td.disabled:hover {
background: #FF9088 !important;
border-radius: 0px !important;
border: 1px solid #fff !important;
color: #fff !important;
}
.bootstrap-datetimepicker-widget table td span.disabled,
.bootstrap-datetimepicker-widget table td span.disabled:hover {
background: #FF9088 !important;
border-radius: 0px !important;
border: 1px solid #fff !important;
color: #fff !important;
}
.day {
background: rgba(88, 204, 0, 0.52) !important;
border-radius: 0px !important;
border: 1px solid #fff !important;
}
</style>
如您所见,我启用了启用绿色的日期,而禁用了其他日期,禁用了其红色的日期...但是我需要允许访问者也选择禁用日期,而不仅仅是启用...
我使用启用和禁用只是给日历上的日期着色...
那么,如何允许选择禁用日期呢?
最佳答案
由于要选择那些日子,因此不应禁用它们。相反,您可以使用data attribute selector将css类动态地添加到要着色为td
的。
请注意,如果更改datetimepicker区域设置,则可能必须更新选择器格式。
在这里您可以找到一个有效的示例:
function addRedClass() {
var redDates = ["05/21/2016","05/22/2016","05/23/2016","05/24/2016"];
for(var i=0; i<redDates.length; i++){
$('[data-day="'+redDates[i]+'"]').addClass('redDate');
}
}
$('#start').datetimepicker({
format: 'YYYY/MM/DD'
}).on('dp.show dp.update', addRedClass);
.bootstrap-datetimepicker-widget table th.redDate,
.bootstrap-datetimepicker-widget table th.redDate:hover {
background: #FF9088 !!important;
border-radius: 0px !important;
color: #fff !important;
border: 1px solid #fff !important;
}
.bootstrap-datetimepicker-widget table td.redDate,
.bootstrap-datetimepicker-widget table td.redDate:hover {
background: #FF9088 !important;
border-radius: 0px !important;
border: 1px solid #fff !important;
color: #fff !important;
}
.bootstrap-datetimepicker-widget table td span.redDate,
.bootstrap-datetimepicker-widget table td span.redDate:hover {
background: #FF9088 !important;
border-radius: 0px !important;
border: 1px solid #fff !important;
color: #fff !important;
}
.day {
background: rgba(88, 204, 0, 0.52) !important;
border-radius: 0px !important;
border: 1px solid #fff !important;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<div class='input-group date' id='start'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
关于jquery - Datetimepicker-允许选择禁用日期,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37528759/