ala*_*oot 3 javascript datetimepicker twitter-bootstrap-3
我想使用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?
});
Run Code Online (Sandbox Code Playgroud)
和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>
Run Code Online (Sandbox Code Playgroud)
我找到了关于类似操作的门票datepicker,但这样做的方式不同,datetimepicker请不要标记重复,除非您发现类似的问题datetimepicker.
Rag*_*zeh 13
基于该链接的拾荒者例子中引导的DateTimePicker文档,这应该工作.
开始:
.on('dp.change', function (selected) {
end.data("DateTimePicker").minDate(selected.date);
});
Run Code Online (Sandbox Code Playgroud)
结束:
.on('dp.change', function (selected) {
start.data("DateTimePicker").maxDate(selected.date);
});
Run Code Online (Sandbox Code Playgroud)
注意:
在旧版本的Bootstrap datetimepicker(小于v4)上,使用.setMinDate和.setMaxDate
| 归档时间: |
|
| 查看次数: |
30646 次 |
| 最近记录: |