![](/img/trans.png)
[英]How to allow maxDate and minDate to be equal on Bootstrap DateTimePicker?
[英]How to set minDate and maxDate for bootstrap datetimepicker on change
我想使用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文档中的Linked Pickers示例 ,这应该可行。
开始:
.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
开始日期
.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()',因为最近的选项考虑的是时间小时和分钟,同时提供maxDate / minDate选项。
尝试使用:
$('.datepickerProjectDate').data("DateTimePicker").minDate('2018-09-15');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.