How to run date picker on the first onclick event?

Answer 1

Make sure you're calling the datepicker upon loading the page, and not with the onclick event.

$(document).ready(function() {
    $("#datepicker").datepicker();
});

Answer 2

I think you misunderstand the meaning of:

$(function() { 
   $("#datepicker").datepicker();      
});

which is the same as:

$(document).ready(function() { 
    $("#datepicker").datepicker(); 
});

and

jquery(document).ready(function() { 
    $("#datepicker").datepicker(); 
});

By enclosing the $("#datepicker").datepicker(); you simply tell the browser to add the .datepicker() event to the date field indicated by the #datapicker ID during the document ready event (when the document is loaded, and ready for processing).

By NOT enclosing it, you would NOT add the event handler until after the document is ready, during the javascript loading (or when it gets called), or the function call if you inclosed it in there.

Keep in mind that if you do:

function mystuff()
{
$("#datepicker").datepicker(); 
};
mystuff();

you will get the handler added when that function runs which may cause issues if you then call it again:

 mystuff();

Answer 3

The reason it's not showing on the first click is because the instant you click it the first time, it is not registered as a datepicker. It therefore has no onclick event telling it that it should show any datepicker when you click it.

On the second click, however, you have set it as a datepicker during the first click (and it now has an onclick event where the datepicker will be shown). The datepicker's onclick event fires, showing the picker.

As mentioned in other answers, this is not the recommended way of doing it. But if you really want to bind it onclick and not onload, you can show the picker on the first click by doing

$(function() {
    $("#datepicker").click(function() {
        $(this).datepicker().datepicker( "show" )
    });
});

This will register the element as a datepicker and show then show it at the same time.