第一次单击时不显示Datepicker

Question

I've just created a simple textbox where inside I binded the .click event to show the Datepicker , anyway, seems that at first click the Datepicker can't show, but if I click outside the control and then click again over the textbox I can see the Datepicker , I wonder why happen this?

Check out my code here:

<input type="text" id="calendar" placeholder="calendar">

$(function()
{
    $('#calendar').click(function()
    {
        $(this).datepicker();
    });
});

FIDDLE.

Answer 1

You are initializing Date picker on your text box click. You have to initialize on document ready method if you want to Open date picker immediate after page load

Change your initializing code to

$(function()
{
    $('#calendar').datepicker();
});

For your reference fiddler updated

Answer 2

You don't have to use the click event to start the date picker. All you have to do is remove the click event and it will work! The date picker is already attached to your input box and will handle the events by itself.

Answer 3

Calling datepicker() does not invoke the calendar display. What datepicker() did was to attach a 'show calendar' event on input-focus. That's the reason why you see the calendar only when you put the focus back on the input field (not on every click of #calendar element).

If you want to trigger the display of calendar due to some other event (like button click), you can call $('#calendar').datepicker('show') .