How to add Datepicker in your Page and in a dynamically added textboxes.

Hi All!

Here's how to make datepicker in your textbox.

First add code below in your header:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Then add datepicker class in your texbox:
<input type="text" class="datepicker">

Then add code below in your script:
<script type="text/javascript">
   $(document).ready(function(){
        $(".datepicker").datepicker();
});

That's it. Datepicker should be showing.

But when adding textboxes dynamically, Here's how.

Make sure you added the headers above.
Create a div for your new textboxes and a button for adding function.
<div id="boxes">
</div>
<button Onclick="AddTextbox()">Add Textbox</button>

Then add code below in your script:

<script type="text/javascript">
$(document).ready(function(){
 
$("#boxes").delegate(".datepicker", "focusin", function () {
    $(this).datepicker();
});
});

function AddTextbox() {
        var txt= document.createElement("input");
         txt.type="text";
         txt.className = "datepicker";
         var div = document.getElementById('boxes');
    div.appendChild(txt);
}
</script>

And if you want to change the date format, add this line after $(this).datepicker();

$(this).datepicker("option", "dateFormat", "dd/mm/yy");

That's it.

Goodluck.