How to run date picker on first onclick event?

Question

I am using this date picker from jqueryui .
If you look at this page, you will find that they are just written by one function:

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

But I want to open my date picker in one click event of a text field.
So I wrote this:

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

in one function that I call in the onclick event text box.
But this raises one problem.

I only get the date picker the second time I click on the text box.
If I click the first time after loading the page, then the date selection will not appear, but as soon as I click the second time, then the date selection will come.

<b> Why? And can I do this on the first click?

Yes, I know this already happens fine if I put the first code, but I want it in my function.

EDIT:
Now I will explain to all of you guys exactly what I am doing. My requirement is this:

1) When I choose a date for the first time. Dates until today should be disabled on the calendar.
2) Now, when I select a date a second time on the calendar, the date should start one day after the previous date. I wrote 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 fine for one requirement, but for the second requirement I need to first check if there is a text field value. If there is any, then
he must choose direct +1 for this date, and previous dates should be disabled.

How to do it?

Answer 1

The reason that it does not appear on the first click is because the moment you click on it for the first time, it is not registered as a date picker. Therefore, it does not have an onclick event telling it that any datepicker should be displayed when clicking on it.

In the second click, however, you set it as the datepicker during the first click (and now it has an onclick event where the date picker will be displayed). The onplick datepicker event is fired showing a picker.

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

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

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

Answer 2

Make sure you call datepicker after the page loads, and not with the onclick event.

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

Answer 3

If anyone wants to display the datupixer in the glyphicon icon and in the input field, I did 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 

Answer 4

I think you misunderstood the meaning:

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

which matches with:

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

and

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

$("#datepicker").datepicker(); , you simply tell the browser to add the .datepicker() event to the date field indicated by the #datapicker identifier during the document ready event (when the document is loaded and ready to be processed).

Without attaching it, you do NOT add an event handler until the document is ready, during javascript loading (or when it will be called) or a function call if you included it there.

Keep in mind that if you do:

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

you will get a handler added when this function starts, which can cause problems if you call it again:

  mystuff(); 

Answer 5

I used this from @Simen Echholt answer

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

Answer 6

I called it in js function and it works. See 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 timepicker.js file

 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 bottom line is: calling .timepicker ('show') , showing the timer itself for the first time.