我有两个input
元素作为jQuery UI datepickers。在第一个datepicker元素上进行选择后,它应该自动关注第二个datepicker元素并显示日历,以便您轻松快速地做出选择。
无论出于何种原因,第二个日期选择器/日历出现片刻然后消失。我不确定它为什么会消失;任何人都可以向我解释它为什么会消失并找到可能的解决方案吗?
目前使用以下库:jQuery 1.8.3,jQuery UI 1.9.2
以下是我目前使用的代码:
<ul class="fields">
<li><label>Date picker #1</label>
<input type="text" class="date-picker-1" />
</li>
<li><label> Date picker #2</label>
<input type="text" class="date-picker-2" />
</li>
</ul>
$('input.date-picker-1').datepicker({
constrainInput: true,
hideIfNoPrevNext: true,
onSelect: function () {
$(this).closest('.fields')
.find('.date-picker-2').datepicker('show');
}
});
$('input.date-picker-2').datepicker({
onFocus: 'show'
});
这是一个小提琴:http://jsfiddle.net/B78JJ/
如果有任何其他信息有用,请随时提出,我将很乐意提供帮助。
答案 0 :(得分:4)
这似乎是焦点时间问题,快速解决方法是使用一个小超时:
$('input.date-picker-1').datepicker({
constrainInput: true,
hideIfNoPrevNext: true,
onSelect: function () {
var dees = $(this);
setTimeout(function() {
dees.closest('.fields').find('.date-picker-2').datepicker('show');
}, 100);
}
});
答案 1 :(得分:0)
由于此原因
$(this).closest('.fields')
.find('.date-picker-2').datepicker('show');
你可以使用
window.setTimeout(function(){
$('.date-picker-2').datepicker('show');
}, 1);
答案 2 :(得分:0)
今天在2019年8月,我们遇到了同样的问题。您可以使用onClose方法解决此问题。启用选项changeMonth或changeYear时出现另一个问题,但使用onChangeMonthYear解决了该问题。
$(function() {
$from = $("#from");
$to = $("#to");
$from.datepicker({
onClose : function(){
$to.datepicker('show');
}
});
$to.datepicker({
changeMonth: true,
changeYear: true,
onChangeMonthYear: function(year, month ){
$to.datepicker('setDate', new Date(year, month-1, 1));
}
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" id="from">
<input type="text" id="to">