第一个焦点会弹出日期选择器

Datepicker pops up on first focus

本文关键字：日期 选择器 焦点 第一个      更新时间：2023-09-26

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

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

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

您可以使用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">

您可以将showOn属性更改为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">

不理想，但是您可以有两个初始化:一个用于所有日期拾取器，另一个用于第一个日期拾取器(如果它是第一个元素):

$(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");
    });
});

Update:如果字段是集中的，您需要触发日期选择器来显示第一次。添加了一个click事件来处理这个问题。

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

相关文章：