javascript - 在更改时显示日期选择器

Question

我有一个带有 3 个输入的简单 html 表单

<input id="dateBegin" type="text"  placeholder="Begin">

<input id="dateEnd" type="text" placeholder="End">

<input id="datePrice" type="text"  placeholder="Ex. : 220.00">

在前两个中，我添加了一个日期选择器

$("#dateBegin").datepicker({ dateFormat: 'yy-mm-dd', minDate: 'now' });
$("#dateEnd").datepicker({ dateFormat: 'yy-mm-dd', minDate: 'now' });

现在，为了创建流畅的用户体验，我想在填写一个输入后选择表单中的下一个输入。具体来说就是:

1. [用户在第一个输入 (dateBegin) 内单击] -> 显示日期选择器。
2. [用户使用日期选择器选择日期] -> dateBegin 填充日期值，链接到 dateBegin 的日期选择器隐藏，下一个输入 (dateEnd) 获得焦点并显示其日期选择器。
3. [用户使用第二个日期选择器选择日期] -> dateEnd 填充日期值，链接到 dateEnd 的日期选择器隐藏，下一个输入 (datePrice) 获得焦点。

为了实现此行为，我已将此代码添加到我的页面

$('#dateEnd').change(function(){
    $("#datePrice").focus();

});
$('#dateBegin').change(function(){
    $("#dateEnd").focus();
    $("#dateEnd").datepicker("show"); // This line can be removed it doesn't change anything but I've tried it :p
});

我的问题出在步骤 2)。链接到 dateEnd 的日期选择器会短暂出现，然后消失。可能不太清楚，所以这里是 JSFiddle复制它。

我不明白为什么链接到 dateEnd 的日期选择器消失了？ 但是，更重要的是，我怎样才能实现所需的行为？

Answer 1

试试这个

$('#dateBegin').change(function(){
    setTimeout(function (){
            $("#dateEnd").focus();
        }, 1);
});

我认为发生的情况是，将焦点设置到下一个文本框后，日历仍然认为它需要关闭。通过延迟焦点更改，您可以在 jQuery UI 响应单击后更改焦点。