javascript - Datepicker 弹出第一个焦点

Question

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

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

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

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

Answer 1

您可以使用 beforeShow 选项来阻止 datepicker 打开。如果页面刚刚加载返回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">