CODEWITHSUNDEEP
javascriptjquery
JDoe
JDoe

Reputation: 23

Datepicker does not show at first click

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.

Upvotes: 0

Views: 4395

Answers (3)

Julius Delfino
Julius Delfino

Reputation: 1031

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').

Upvotes: 0

Thomas Schoutsen
Thomas Schoutsen

Reputation: 321

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.

Upvotes: 1

Arun Chandran Chackachattil
Arun Chandran Chackachattil

Reputation: 3362

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

Upvotes: 4

Related Questions