我想使用bootstrap datetimepicker向用户询问日期范围.开始日期有一个字段,结束日期有另一个字段,它们初始化为当天前一天.在更改开始日期时,我想将结束日期的minDate设置为开始日期的值;在更改为结束日期时,我想将开始日期的最大日期设置为结束日期的值.但我不能让这个工作.
这是JS代码:
var start = $('.start');
var end = $('.end');
var d = new Date();
var month = d.getMonth() + 1;
var day = d.getDate() - 1;
var year = d.getFullYear();
start.datetimepicker(
{
useCurrent: false,
defaultDate: month + '-' + day + '-' + year + ' ' + '12:00AM',
autoClose: true
})
.on('change', function (selected) {
end.minDate(selected.?????????); // What should replace the question marks?
});
end.datetimepicker(
{
useCurrent: false,
defaultDate: month + '-' + day + '-' + year + ' ' + '11:59PM',
autoClose: true
})
.on('change', function (selected) {
start.maxDate(selected.???????); // What should replace the question marks?
});
和HTML:
<div class="col-sm-3">
<div class="form-group">
<h4>Start Date</h4>
<div class="input-group date">
<input type="text" data-data-fomat="MM-DD-YYY h:mm A" data-ng-model="startDate" id="Calendar1" class="start form-control" placeholder="Choose a date" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<h4>End Date</h4>
<div class="input-group date">
<input type="text" data-data-fomat="MM-DD-YYY h:mm A" data-ng-model="endDate" id="Calendar2" class="end form-control" placeholder="choose a date" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
我在datepicker上找到了关于类似操作的票证,但这与datetimepicker的做法不同,所以请不要标记重复,除非你找到datetimepicker的类似问题.
解决方法:
根据Bootstrap datetimepicker documentation中的Linked Pickers example,这应该工作.
开始:
.on('dp.change', function (selected) {
end.data("DateTimePicker").minDate(selected.date);
});
结束:
.on('dp.change', function (selected) {
start.data("DateTimePicker").maxDate(selected.date);
});
注意:
在旧版本的Bootstrap datetimepicker(小于v4)上,使用.setMinDate和.setMaxDate