我正在使用 bootstrap datetimepicker，如何在 datetimepicker bootstrap 中添加一天minDate?
我想过滤minDate多1天。例如我的checkIndatetimepicker 是 02/16/18 那么 02/16/18 的日期被禁用checkOut日期时间选择器。
<script>
$(function () {
$('#CheckIn').datetimepicker({
format: 'MM/DD/YYYY'
});
$('#CheckOut').datetimepicker({
useCurrent: false,//Important! See issue #1075
format: 'MM/DD/YYYY'
});
$("#CheckIn").on("dp.change", function (e) {
$('#CheckOut').data("DateTimePicker").minDate(e.date);
});
$("#CheckOut").on("dp.change", function (e) {
$('#CheckIn').data("DateTimePicker").maxDate(e.date);
});
});
</script>
正如文档所说，dp.change https://eonasdan.github.io/bootstrap-datetimepicker/Events/#dpchange:
日期更改时触发。
参数：
e = {
date, //date the picker changed to. Type: moment object (clone)
oldDate //previous date. Type: moment object (clone) or false in the event of a null
}
since e.date是一个可以使用的矩对象add http://momentjs.com/docs/#/manipulating/add/ method.
这是一个活生生的例子：
$(function () {
$('#CheckIn').datetimepicker({
format: 'MM/DD/YYYY'
});
$('#CheckOut').datetimepicker({
useCurrent: false,//Important! See issue #1075
format: 'MM/DD/YYYY'
});
$("#CheckIn").on("dp.change", function (e) {
if( e.date ){
e.date.add(1, 'day');
}
$('#CheckOut').data("DateTimePicker").minDate(e.date);
});
$("#CheckOut").on("dp.change", function (e) {
$('#CheckIn').data("DateTimePicker").maxDate(e.date);
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.4/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id="CheckIn">
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id="CheckOut">
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
