[英]How to set minDate and maxDate for bootstrap datetimepicker on change
I want to ask users for a date range using bootstrap datetimepicker. 我想使用bootstrap datetimepicker向用户询问日期范围。 There is a field for the start date and another one for the end date, and they're initialized to the day before current day.
开始日期有一个字段,结束日期有另一个字段,它们初始化为当天前一天。 On change to the start date, I want to set the minDate of end date to the value of start date;
在更改开始日期时,我想将结束日期的minDate设置为开始日期的值; and on change to end date I want to set the max date of start date to the value of end date.
在更改为结束日期时,我想将开始日期的最大日期设置为结束日期的值。 But I cannot get this working.
但我不能让这个工作。
Here is the JS code: 这是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?
});
and the HTML: 和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>
I've found tickets about similar operation on datepicker
, but that is done differently from datetimepicker
so please don't mark duplicate unless you find similar question for datetimepicker
. 我在
datepicker
上找到了关于类似操作的票证,但这与datetimepicker
做法不同,所以请不要标记重复,除非你找到datetimepicker
类似问题。
Based on the Linked Pickers example in the Bootstrap datetimepicker documentation , this should work. 根据Bootstrap datetimepicker文档中的Linked Pickers示例 ,这应该可行。
Start: 开始:
.on('dp.change', function (selected) {
end.data("DateTimePicker").minDate(selected.date);
});
End: 结束:
.on('dp.change', function (selected) {
start.data("DateTimePicker").maxDate(selected.date);
});
Note: 注意:
On older versions of Bootstrap datetimepicker (less than v4), use .setMinDate
and .setMaxDate
在旧版本的Bootstrap datetimepicker(小于v4)上,使用
.setMinDate
和.setMaxDate
Start Date 开始日期
.on('dp.change', function (selected) { end.data("DateTimePicker").minDate(selected.date); });
End Date 结束日期
.on('dp.change', function (selected) { start.data("DateTimePicker").maxDate(selected.date); });
Package Upgrade : The date timepicker package has been upgraded to latest version where we can use 'maxDate()' in place of 'setMaxDate()' and 'minDate()' inplace of 'setMinDate()' as the recent options consider even time in hrs and mins while providing maxDate/minDate option. 包升级 :日期timepicker包已升级到最新版本,我们可以使用'maxDate()'代替'setMaxDate()'和'minDate()'取代'setMinDate()',因为最近的选项考虑的是时间小时和分钟,同时提供maxDate / minDate选项。
尝试使用:
$('.datepickerProjectDate').data("DateTimePicker").minDate('2018-09-15');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.