jquery datepicker click issues when datepicker created dynamically

Question

I created datepicker using jquery on document ready method my code as below

$(document).ready(function(){
  $("#setdate").html('<input type="text" class="datepicker">');
 });

So my text box created at run time and I was added class name as datepicker when I click on that text box it not shows datepicker dialog because of it creates on page load times so I was added following code

 $(this).on("click", ".datepicker", function(){
     $(".datepicker").datepicker({
     changeMonth: true,
     changeYear: true 
   });
 });

When I clicked on datepicker textbox at first time it shows nothing but next click it opens datepicker dialog can any one knows why this happens, I want open datepicker on first click how it possible?

Answer 1

Your logic is slightly out of sync. You are only turning the text box into a datepicker when it is clicked on. This means before the first click it is just a regular text box. What you want to do is turn the text box into a datepicker on pageload.

This should work:

$(document).ready(function(){

  //create the text box
  $("#setdate").html('<input type="text" class="datepicker">');

  //initialise the datepicker code on the text box
  $(".datepicker").datepicker({
     changeMonth: true,
     changeYear: true 
   });

 });