Question

我的表单的第一个输入字段在文档就绪后几毫秒（在我的情况下最多50毫秒）后获得焦点。然后弹出日期选择器，以防第一个输入字段是日期。

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

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

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

Answer 1

您可以使用beforeShow选项阻止datepicker开启。如果页面刚加载return false。我用时间来确定页面是否刚加载;如果你打算用时间找一个适合你需要的时间。

＆＃13;

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

＆＃13;

<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">

＆＃13;

Answer 2

您可以将第一个日期选择器上的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">

Answer 3

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

$(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/

Datepicker弹出第一个焦点

3 个答案: