How to run date picker on the first onclick event?

I am using this date picker from jqueryui.
If you look on that page, then you will find that they have just written in one function like this:

    $(function() {
        $("#datepicker").datepicker();
    });
    </script>

But I want to open my date picker on one text box click event.

So I have written this:

$("#datepicker").datepicker();

in one function which I am calling on the textbox onclick event.

But in this there is one problem coming.

I am only getting the date picker on the second time I click on the text box.

If I click the first time after the page loads then the date picker will not come up but as soon as I click the second time then the date picker is coming.

Why? And can I do it on the first click?

Yes I know this is already happening perfectly if I put the first code but I want it in my function.

EDIT:

Now I will explain to all you guys what exactly I am doing.

My requirement is like this:

1) When I select the date the first time. Dates before today's date should be disabled in calender.

2) Now when I select the date the second time in the calender, the date should start one day after th开发者_StackOverflow社区e previous date.

I have written like this....

$(function() {
                   $('#from').datepicker({
                            defaultDate: "+5d",
                            changeMonth: true,
                            numberOfMonths:1 ,
                            minDate:"+0d",
                            dateFormat: 'DD, MM d, yy',
                            onSelect: function(selectedDate) {
                                    var option = this.id == "from" ? "minDate" : "maxDate";

                                   var instance = $(this).data("datepicker");

                                    var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);


                                    dates.not(this).datepicker("option", option, date);

                            }
                    });

});

This works perfectly on one requirement,

but for the second requirement I need to check first if there is any text box value. If there is any then
it should select direct +1 to that date and previous dates should be disabled.

How to do this?

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.

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

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

If by any chance anyone want to display the datepicker in a glyphicon icon and on the input field I made the following:

html part:

<div class="form-group">
   <label>Fecha:<font color="#FF0000">*</font></label>
 <div class='input-group date' id='datepicker1'>
   <input id="fecha" name="fecha" type="text" class="form-control" />
    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

javascript part:

$(function() {
         $("#fecha").datepicker();
         });//this enable the call to datepicker when click on input field

         $(function() {
            $("#datepicker1").click(function() {
                $('#fecha').datepicker().datepicker( "show" )
            });
        });//this one enables the onclick event on the glyphicon

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();

i have used like this from @Simen Echholt answer

<input onclick="$(this).datepicker().datepicker('show')" class="validate[required,custom[date]] text-input" ...

I'd called it in the js function, and it working. See the code snippet:

Step-1: In the file: timepicker.jsp

  <input class="time ui-timepicker-input" id="dcma_day_start"  type="text" autocomplete="off" 
     placeholder="End time" onClick="dcmaTimePicker('dcma_day_start', 'dcma_durationId');">

Step-2:In the file timepicker.js

function dcmaTimePicker( id, durationId)
{   
    var d = document.getElementById(durationId);

    if(!d.value)
    {
        d.value = 15;
    }

    jQuery('input#'+id).timepicker({ 'step': d.value }).timepicker('show');
}

Step-3: The crux is: calling the .timepicker('show'), showing the timepicker at first time itself.

Add a function on div onclick="removeFocus()" and add focus removel script.

<script>
    function removeFocus() {
        $('input').blur();
    }
</script>