jQuery UI Datepicker，从一个日历移动到下一个？答案

【问题标题】：jQuery UI Datepicker, move from one Calendar to the next?jQuery UI Datepicker，从一个日历移动到下一个？
【发布时间】：2016-10-06 15:10:30
【问题描述】：

我正在寻找一种在用户选择日期后从一个日历移动到下一个日历的方法，例如：

用户选择dateFrom
自动关闭dateFrom日历并显示dateTo版本

我觉得我接近解决方案，但 dateTo 日历弹出然后立即消失，我正在连接日历的 onSelect 功能，当 inst 是 dateFrom日历，然后我在dateTo 文本框上调用.focus() 例如：

$('.datepicker > input').datepicker({
        // snip.....
        onSelect: function (dateText, inst) {
            var type = $('#' + inst.id).data('calendar');
            if (type === 'date-from') {
                $('.js-hook--date-to').focus();
            }
        }
});

标记：

<div class="large-2 columns">
    <div class="datepicker">
        <asp:TextBox ID="txtDateFrom" runat="server" placeholder="CHECK IN" data-calendar="date-from" />
    </div>
</div>
<div class="large-2 columns">
    <div class="datepicker">
        <asp:TextBox ID="txtDateTo" runat="server" CssClass="js-hook--date-to" placeholder="CHECK OUT" data-calendar="date-to" />
    </div>
</div>

这会导致下一个日历弹出，然后消失，有没有简单的方法来实现这一点？

编辑*

我也尝试过使用.datepicker("show");，但没有成功。

第二次编辑*

jsFiddle to demonstrate

【问题讨论】：

jQuery Datepicker: Prevent closing picker when clicking a date的可能重复
@blgt 这有什么关系？一旦在第一个日期中选择了日期，我想显示一个不同的单独日历对象。不幸的是，它与这个问题无关。
如果您使用开箱即用的小部件，它只会在页面上绘制一个 div 并将其重用于所有输入字段。您已经使用.focus() 进行了输入交换，看起来问题在于保持打开状态。如果不是这样，你能做一个 MCVE 吗？
帮助解决这个问题的最佳方式是现场演示。一个建议是先关闭当前...然后使用 setTimeout() 触发下一个。让插件有机会清理第一个然后构建第二个
@blgt 没关系，我不打算同时显示两个日历，目的是打开第一个，选择一个日期，关闭它，然后显示第二个。我不明白这与提议的欺骗有什么关系？那家伙在问如何在选择日期后保持日历打开..

标签： javascript jquery jquery-ui calendar

【解决方案1】：

在触发焦点之前使用短暂的延迟。

 onSelect: function(dateText, inst) {
   var type = $('#' + inst.id).data('calendar');
   if (type === 'date-from') {
     setTimeout(function() {
       $('.js-hook--date-to').focus();
     }, 50)

   }
 }

如 cmets 中所述，该插件仅对所有实例使用一个容器。

我认为正在发生的事情是因为当您触发焦点时第一个实例还没有完全关闭和清理，新实例在第一个事件中被隐藏了

我随意设置了延迟，并没有玩太多，看看什么是最好的。

DEMO

【讨论】：

完美，谢谢。如果没有超时就这样做会很好，但现在就足够了。
尚未查看 api...但可能有 closed 事件..不确定
是的，有一个onClose，我在这里检查type，如果日历选择了日期，则移动到下一个日历对象，这不需要超时，不过感谢您的帮助，我会将其添加为答案，以防对其他人有所帮助。
@charlietfl 没有事件。 datepicker 不是来自小部件工厂，因此没有其他小部件使用的标准机制
@blgt 似乎有..请参阅下面的答案

【解决方案2】：

我设法使用onClose 做到这一点，并检查是否使用getDate 选择了日期：

onClose: function (dateText, inst) {
      var picker = $('#' + inst.id);
      var type = picker.data('calendar');
      var date = picker.datepicker('getDate');
      if (type === 'date-from' && date !== null) {
            $('.js-hook--date-to').focus();
      }
}

【讨论】：