Datepicker弹出第一个焦点

Question

The first input field of my form gains focus after a few miliseconds after document ready (in my case up to 50 ms). Then the datepicker pops up in case the first input field is a date.

What I need is to have focus on the first input field after the page loads and pop up the datepicker on focus event, but not immediately after the page loads. Which means if the first input element is a date, it gains focus and after I click on it the datepicker should show itself. Then all the other datepickers should pop up on focus. I need to do it that way so I wont have to loose and gain focus again.

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

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

Answer 1

You can use the beforeShow option to prevent the datepicker from opening. If the page just loaded return false . I have used time to determine whether the page just loaded; if you're going to use time find a time that suits your needs.

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

Answer 2

You can change the showOn property on the first datepicker to button , hide the button in your css and add an autofocus to your input field. Adding an additional click handler to the first input will help to open the datepicker, before clicking anywhere else.

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

Not ideal, but you could have two initializations: one for all the datepickers, and another for the first datepicker (if it's the first element):

$(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: If the field is focused, you'll need to trigger the datepicker to show the first time. Added a click event to deal with that.

You can see it working on this JSFiddle: http://jsfiddle.net/sqjgk8y7/1/