Datepicker pops up on first focus

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