我想使用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
的类似问题,否则请不要标记重复。
答案 0 :(得分:13)
根据Linked Pickers example中的Bootstrap datetimepicker documentation,这应该有效。
开始:
.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
答案 1 :(得分:2)
开始日期
.on('dp.change', function (selected) {
end.data("DateTimePicker").minDate(selected.date);
});
结束日期
.on('dp.change', function (selected) {
start.data("DateTimePicker").maxDate(selected.date);
});
套餐升级: 日期timepicker软件包已升级到最新版本,我们可以使用'maxDate()'代替'setMaxDate()'和'minDate()'代替'setMinDate()',因为最近的选项考虑了在hrs和提供maxDate / minDate选项时的分钟。
答案 2 :(得分:0)
尝试使用:
$('.datepickerProjectDate').data("DateTimePicker").minDate('2018-09-15');