Question

我正在寻找一种方法，一旦用户选择了一个日期，就可以从一个日历移动到另一个日历，例如：

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

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

$('.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

Answer 1

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

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

   }
 }

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

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

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

的 DEMO

Answer 2

我设法使用Web Deployment Overview for Visual Studio and ASP.NET执行此操作，并检查是否已使用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();
      }
}

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

2 个答案: