Javascript Datepicker在第一个焦点时弹出

我表单的第一个输入字段在文档准备就绪几毫秒后获得焦点（在我的例子中，最长为50毫秒）。如果第一个输入字段是日期，则会弹出日期选择器

我需要的是在页面加载后将焦点放在第一个输入字段上，并在焦点事件上弹出日期选择器，但不要在页面加载后立即弹出。这意味着，如果第一个输入元素是日期，它将获得焦点，在我单击它之后，datepicker将显示自己。然后，所有其他的日期选择器都应该出现在焦点上。我需要这样做，这样我就不必再放松和集中注意力了

<input data-calendar-format="dd.MM.yyyy">

$(document).ready(function() {
    $('input[data-calendar-format]').datepicker({
        dateFormat: 'dd.mm.yy'
    });
});

$（文档）.ready（函数（）{
$（“输入[数据日历格式]）。日期选择器({
日期格式：“年月日”
});
});

您可以使用

beforeShow

选项来防止

日期选择器打开。如果页面刚刚加载
返回false
。我已经用时间来确定页面是否刚刚加载；如果你想利用时间，找一个适合你需要的时间


$（文档）.ready（函数（）{
var dt=Date.now（）；
$（“输入[数据日历格式]）。日期选择器({
日期格式：“年月日”，
beforeShow:function（）{
如果（Date.now（）-dt<51）{
返回false；
}
}
});
$（'：input'）.first（）.focus（）.on（'click'，function（））{
$（this.datepicker（'show'）；
});   
});
您可以将第一个日期选择器上的
shown
属性更改为
按钮
，将按钮隐藏在css中，并将
自动对焦
添加到输入字段中。在第一个输入中添加一个额外的
单击处理程序将有助于在单击其他任何位置之前打开日期选择器


$（文档）.ready（函数（）{
$（“输入[数据日历格式]）。日期选择器({
日期格式：“年月日”，
showOn：“按钮”
});
$（'.more datepicker'）。datepicker({
日期格式：“年月日”，
showOn：“聚焦”
});
$（'input[data calendar format]'）。在（'click'，function（）上{
$（this.datepicker（“show”）；
})
});
.ui日期选择器触发器{
显示：无；
}
不理想，但您可以有两个初始化：一个用于所有日期选择器，另一个用于第一个日期选择器（如果它是第一个元素）：

$（文档）.ready（函数（）{
//所有不是第一个孩子的日期选择器
$（'input[data calendar format]：非（：n个子项（1））。日期选择器({
日期格式：“年月日”
});
//第一个孩子如果是个约会挑肥拣瘦的人
$（'input[data calendar format]：第n个子项（1）'）.focus（）.datepicker({
日期格式：“年月日”
}).on（“单击”，函数（）{
//该字段是聚焦的，因此我们需要触发datepicker以显示第一次
$（this.datepicker（“show”）；
});
});

更新：如果字段是焦点，则需要触发日期选择器以显示第一次。添加了一个
单击
事件来处理该问题

您可以看到它在这个JSFiddle上工作：
您到底想要什么？您能做一些JSFiddle工作吗？页面加载。第一个输入字段获得焦点并将光标放在其中。在我点击它之后——没有先点击出去，日期选择器就会显示出来。使用日期选择器的所有其他输入都会在焦点上显示日期选择器。听起来这并不能解决我的问题，因为我不希望元素在日期选择器显示之前失去焦点。我也不能设置初始化等待和检测日期元素焦点的超时时间，因为对于多个客户端来说，它不会是同一时间。即使在这种情况下，您也必须先松开焦点，然后再获得它。@Lejla看一下更新的版本。。并非如此，因为您有一个50毫秒后聚焦于第一个元素的进程，所以您不需要
.first（）.focus（）
部分。