日期选择器在第一个焦点上弹出答案

【问题标题】：Datepicker pops up on first focus日期选择器在第一个焦点上弹出
【发布时间】：2015-07-28 12:22:35
【问题描述】：

我的表单的第一个输入字段在文档准备好几毫秒后获得焦点（在我的情况下长达 50 毫秒）。如果第一个输入字段是日期，则会弹出日期选择器。

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

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

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

【问题讨论】：

你到底想要什么？
你能做一些 jsfiddle 的努力吗？
页面加载。第一个输入字段获得焦点并在其中包含光标。在我点击它之后 - 没有先点击日期选择器会显示。带有日期选择器的所有其他输入都将显示日期选择器焦点。
听起来很像this
这并不能解决我的问题，因为我不希望元素在日期选择器显示之前失去焦点。我也无法为初始化设置超时以等待并检测日期元素上的焦点，因为多个客户端的时间不会相同。

标签： javascript jquery jquery-ui datepicker

【解决方案1】：

您可以使用beforeShow 选项来阻止datepicker 打开。如果页面刚刚加载return false。我已经用时间来确定页面是否刚刚加载；如果您打算使用时间，请找到适合您需要的时间。

$(document).ready(function() {
    var dt = Date.now();
    $('input[data-calendar-format]').datepicker({
        dateFormat: 'dd.mm.yy',
        beforeShow: function() {
            if( Date.now() - dt < 51 ) {              
                return false;
            }
        }
    });
    $(':input').first().focus().on('click',function() {
        $(this).datepicker('show');
    });   
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

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

【讨论】：

即使在这种情况下，您也必须放松注意力，然后再重新获得它。
@Lejla 看看更新的版本。 .. 并不是因为您有一个专注于 50 毫秒后第一个元素的流程，所以您不需要 .first().focus() 部分。

【解决方案2】：

您可以将第一个日期选择器上的 showOnproperty 更改为 button，隐藏您的 CSS 中的按钮并在您的输入字段中添加一个 autofocus。在第一个输入中添加一个额外的click 处理程序将有助于在单击其他任何位置之前打开日期选择器。

$(document).ready(function() {
  $('input[data-calendar-format]').datepicker({
    dateFormat: 'dd.mm.yy',
    showOn: "button"
  });
  $('.more-datepickers').datepicker({
    dateFormat: 'dd.mm.yy',
    showOn: "focus"
  });
  $('input[data-calendar-format]').on('click', function() {
    $(this).datepicker("show");   
  })
});

.ui-datepicker-trigger {
    display: none;
}

<link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>

<input data-calendar-format="dd.MM.yyyy" autofocus />
<input class="more-datepickers">
<input class="more-datepickers">

【讨论】：

【解决方案3】：

不理想，但您可以有两个初始化：一个用于所有日期选择器，另一个用于第一个日期选择器（如果它是第一个元素）：

$(document).ready(function() {

    // all the datepickers that are not the first child
    $('input[data-calendar-format]:not(:nth-child(1))').datepicker({
        dateFormat: 'dd.mm.yy'
    });

    // the first child if it's a datepicker
    $('input[data-calendar-format]:nth-child(1)').focus().datepicker({
        dateFormat: 'dd.mm.yy'
    }).on("click", function() {
        // the field is focused, so we need to trigger datepicker to show the first time
        $(this).datepicker("show");
    });

});

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

你可以看到它在这个 JSFiddle 上工作：http://jsfiddle.net/sqjgk8y7/1/

【讨论】：