5

我有两个input作为 jQuery UI 日期选择器的元素。在您对第一个 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/

如果任何其他信息会有所帮助，请随时询问，我很乐意提供帮助。

4

3 回答 3

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);
    }
});

见工作小提琴

于 2013-04-20T16:55:03.743 回答
0

因为这

 $(this).closest('.fields')
           .find('.date-picker-2').datepicker('show');

您可以使用

window.setTimeout(function(){
           $('.date-picker-2').datepicker('show');
        }, 1);
于 2013-04-20T16:52:03.280 回答
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">

于 2019-08-09T12:21:00.030 回答