我想在另一个选择器中选择日期后打开datepicker
。为此,我们可以在 datepicker
中看到很多建议和答案,但我找不到 datetimepicker
的解决方案。我在项目中使用的默认 datetimepicker
是这样的
$('.datepicker').datetimepicker({
format: 'MM/DD/YYYY',
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-chevron-up",
down: "fa fa-chevron-down",
previous: 'fa fa-chevron-left',
next: 'fa fa-chevron-right',
today: 'fa fa-screenshot',
clear: 'fa fa-trash',
close: 'fa fa-remove',
inline: true
}
});
尝试
$( "#QuoteDate" ).datepicker({
minDate: 0,
changeMonth: true,
changeYear: true,
maxDate: "+2Y",
onSelect: function( selectedDate ) {
$( "#DueDate" ).datepicker("option", "minDate", selectedDate );
setTimeout(function(){
$( "#DueDate" ).datepicker('show');
}, 16);
}
});
$( "#DueDate" ).datepicker({
changeMonth: true,
changeYear: true,
maxDate: "+2Y",
});
如果我尝试像 onSelect
: 那样编写代码,如 datepicker
中那样,它不会接受。请任何人帮助我找到解决方案。此选择器中的 onSelect
日期将调用另一个选择器。
最佳答案
如果您需要链接日期时间选择器,请查看 Linked Pickers文档中的示例。
您必须将监听器添加到 dp.change
事件,因为 datetimepicker 没有 onSelect
选项。请注意dp.change
:
Fired when the date is changed.
Parameters:
e = { date, //date the picker changed to. Type: moment object (clone) oldDate //previous date. Type: moment object (clone) or false in the event of a null }
您可以使用show()
函数使第二个日期时间选择器打开。
这是一个完整的实例:
var icons = {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-chevron-up",
down: "fa fa-chevron-down",
previous: 'fa fa-chevron-left',
next: 'fa fa-chevron-right',
today: 'fa fa-screenshot',
clear: 'fa fa-trash',
close: 'fa fa-remove',
//inline: true
};
$('#QuoteDate').datetimepicker({
format: 'MM/DD/YYYY',
useCurrent: false,
minDate: moment().startOf('day'),
maxDate: moment().add(2, 'years'),
icons: icons
}).on('dp.change', function(e){
console.log('change', e.date, e.oldDate);
if(
( e.date && !e.oldDate ) ||
( e.date && e.oldDate && !e.date.isSame(e.oldDate, 'day') )
){
setTimeout(function(){
$('#DueDate').data("DateTimePicker").show();
}, 16);
}
$('#DueDate').data("DateTimePicker").minDate(e.date);
});
$('#DueDate').datetimepicker({
format: 'MM/DD/YYYY',
useCurrent: false,
minDate: moment().startOf('day'),
maxDate: moment().add(2, 'years'),
icons: icons
}).on('dp.change', function(e){
$('#QuoteDate').data("DateTimePicker").maxDate(e.date);
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='QuoteDate'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='DueDate'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
由于您使用的是 datetimepicker,因此可以使用 minDate: moment().startOf('day')
代替 minDate: 0
和 maxDate: moment ().add(2, 'years')
而不是 maxDate: "+2Y"
(有关详细信息,请参阅 moment startOf()
和 add()
文档)。
按照 Linked Pickers 中的建议例如,您必须使用 useCurrent: false
选项。
关于javascript - 使用 jquery 触发另一个日期时间选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46990429/