Datepicker for dynamically added textbox

Question

I am trying to access datepicker() for each textbox dynamically added. here is my code :

  <div id="parent">
     Date: <input type="text" class="datepicker"><input type="button"value="Add"  id="btn"> 
  </div>





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

  $(document).ready(function () {

    $("#btn").click(
        function () {
            AlertSave();
        }            
    );
});

  function AlertSave() {
  var textBox = document.createElement("input");
  textBox.setAttribute("class","datepicker");
document.getElementById("parent").appendChild(textBox);


   }

But my problem is , the first texbox shows datepicker. but the newly added textfield doen't shows datepicker. What's wrong with my code?

fiddle:https://jsfiddle.net/nguc6y4L/

You can also use another alternate solution like: http://stackoverflow.com/questions/10433154/putting-datepicker-on-dynamically-created-elements-jquery-jqueryui — Arun P Johny, Apr 22 '16 at 06:39
[`$(textBox).datepicker();`](https://jsfiddle.net/tusharj/38hbb97k/) — Tushar, Apr 22 '16 at 06:40

score 1 · Accepted Answer · answered Apr 22 '16 at 06:38

1

You just need to initialize datepicker after adding new element. Just add $( ".datepicker" ).datepicker(); after adding new textbox. It will work.

Check: https://jsfiddle.net/koqppkuf/

answered Apr 22 '16 at 06:38

Dhara Parmar

8,021
1
16
27

Datepicker for dynamically added textbox

1 Answers1