jquery ui datepicker not working on adding new input field

Question

I am new to jQuery and stuck with this problem for quite a while now.

I am using jQuery ui datepicker in input fields which are dynamically added on click of a button. The date picker works only for the first instance of input box. Have tried searching for a solution, but no luck. Any help will be greatly appreciated. Thanks

jQuery code

$( ".datepicker" ).datepicker({
        inline: true,
        dateFormat: "yy-mm-dd"
    });

Html Code

<div id="newlink">
    <div>
        <table style="border: 1px solid black;">
            <tr>
                <th>Date:</td>
                    <td>
                        <input type="text" name="linkurl[]" id="Editbox18" class="datepicker" style="width: 147px; height: 23px; z-index: 2; color: black" autocomplete="off">
                    </td>
            </tr>
            <tr>
                <th>Remark:</td>
            </tr>
            <tr>
                <td>
                    <textarea name="linkdesc[]" size="1" id="Editbox19" style="width: 550px; height: 45px; z-index: 2; color: black" autocomplete="off"></textarea>
                </td>
            </tr>
        </table>
        <br>
    </div>
</div>
<br>
<p id="addnew">
    <input onclick="new_link()" type="button" name="linkdesc[]" value="Add More" style="width: 80px; height: 24px; z-index: 136; color: black;">
</p>
<!-- Template -->
<div id="newlinktpl" style="display: none"> <font size="1.5">
            <hr style="width: 75%; margin-left: -5px;" /> <br />
            <div>
                <table style="border: 1px solid black;">
                    <th>Date:
                    </td>
                    <td><input type="text" name="linkurl[]" id="Editbox"
                        class="datepicker"
                        style="width: 147px; height: 23px; z-index: 2; color: black"
                        autocomplete="off"></td>
                    </tr>
                    <tr>
                        <th>Remark:
                        </td>
                    </tr>
                    <tr>
                        <td><textarea name="linkdesc[]" size="1" id="Editbox19"
                                style="width: 550px; height: 45px; z-index: 2; color: black"
                                autocomplete="off"></textarea></td>
                    </tr>
                    <script type="text/javascript">
                        var ct = 1;
                        function new_link() {
                            ct++;
                            var div1 = document.createElement('div');
                            div1.id = ct;
                            // link to delete extended form elements
                            var delLink = ' <input onclick="delIt(' + ct
                                    + ')" type="button" value="Del" style="position:relative; top:-20px; left:600px; color:black; width:50px;height:20px;z-index:136;">';

                            div1.innerHTML = document.getElementById('newlinktpl').innerHTML + delLink;
                            document.getElementById('newlink').appendChild(div1);
                        }
                        // function to delete the newly added set of elements
                        function delIt(eleId) {
                            d = document;
                            var ele = d.getElementById(eleId);
                            var parentEle = d.getElementById('newlink');
                            parentEle.removeChild(ele);
                        }
                    </script>
                    </td>
                    </tr>
                </table>
            </div>
        </font>
</div>

possible duplicate of [putting datepicker() on dynamically created elements - JQuery/JQueryUI](http://stackoverflow.com/questions/10433154/putting-datepicker-on-dynamically-created-elements-jquery-jqueryui) — showdev, Jun 16 '14 at 19:59

David · Answer 1 · 2014-06-17T09:26:51.657

As far as i remember, when using multiple datepickers, they need unique ids for that input. So if you are adding new content, you 1st need unique ids. Also document ready is a single event that occurs when all document elements loaded. So you need to bind to something else. e.g.

html

<div id="linkscontainer">
<div id="newlink" class="linkbox">
    <div style="border:1px solid black;"> <span>Date:</span>
        <span><input type="text" name="newdate[]" value="" id="dates" class="date" /><span>


    <div>Remark:</div>


<textarea name="linkdesc[]" size="1" id="Editbox19" style="width:550px;height:45px;z-index:2; color:black" autocomplete="off"></textarea>

    </span></span></div> 
    <input  type="button" class="delete" name="delete" id="delete" value="delete" style="width: 80px; height: 24px; z-index: 136; color: black;">    
    </div>
    </div>

<input  type="button" id="addnew" name="linkdesc[]" value="Add More" style="width: 80px; height: 24px; z-index: 136; color: black;">

jquery

$(document).ready(function(){

var container= $('#newlink').html(); // container to add
var ids=1; //id numbers for add. datepickers

$('#addnew').click(function() {
     $('#linkscontainer').append(container); // add container
    $('.date:last').attr('id', ids);// each datepicker must have a unique id. 
    $('.delete:last').attr('id', 'f'+ids);// each deletebutton must have a unique id. 
    ids++; // increase the id numbers

});

});

$(document).on('focus',".date", function(){ //bind to all instances of class "date". 
   $(this).datepicker();
});

Fiddle:

http://jsfiddle.net/M6jZL/

Edit:

delete button needs to be done in the same way:

$(document).on('focus',".delete", function(){ //bind to all instances of class "date". 
 $(this).parent().remove(); 
});

Thanks. Worked perfectly fine but now I am unable to make delete button function to delete its respective container. — aqua, Jun 17 '14 at 07:18
you need to bind the click function to each new delete button created, see the updated fiddle. — David, Jun 17 '14 at 09:27

Samuel · Answer 2 · 2014-06-17T11:33:31.170

You need to set datePicker in new input element that you create, but how you copy the input that yet had a datepicker you need remove class hasDatePicker from the new element. Try the code below.

Code Updated http://jsfiddle.net/L3X4D/1/

HTML

<div id="newlink">
    <div>
        <table style="border:1px solid black;">
            <tr>
                <th>Date:</td>
                    <td>
                        <input type="text" name="linkurl[]" id="Editbox18" class="datepicker" style="width:147px;height:23px;z-index:2; color:black" autocomplete="off">
                    </td>
            </tr>
            <tr>
                <th>Remark:</td>
            </tr>
            <tr>
                <td>
                    <textarea name="linkdesc[]" size="1" id="Editbox19" style="width:550px;height:45px;z-index:2; color:black" autocomplete="off"></textarea>
                </td>
            </tr>
        </table>
        <br>
    </div>
</div>
<br>
<p id="addnew">
    <input id="clickBTN" type="button" name="linkdesc[]" value="Add More" style="width:80px;height:24px;z-index:136; color:black;">
</p>
<!-- Template -->
<div id="newlinktpl" style="display:none"><font size="1.5">
  <hr style="width:75%; margin-left:-5px;"/><br/>
<div>
  <table style="border:1px solid black;">
    <th>Date:</td>
        <td> <input type="text"  name="linkurl[]" id="Editbox" class="datepicker" style="width:147px;height:23px;z-index:2; color:black" autocomplete="off" >
        </td></tr>


        <tr>
        <th>Remark:</td></tr><tr>
        <td><textarea name="linkdesc[]" size="1" id="Editbox19" style="width:550px;height:45px;z-index:2; color:black" autocomplete="off" ></textarea>
        </td></tr>

    </td>
    </tr>
    </table>                        
  </div></font>

</div>

JS

 $(document).ready(function () {
        $(".datepicker").datepicker({
            inline: true,
            dateFormat: "yy-mm-dd"
        });
        $("#clickBTN").click(function () {
            new_link()
        });
    });

    var ct = 1;

    function new_link() {
        ct++;
        var div1 = $('<div></div>');
        $(div1).attr('id', ct);
        // link to delete extended form elements
        var delLink = $('<input type="button" value="Del" style="position:relative; top:-20px; left:600px; color:black;      width:50px;height:20px;z-index:136;">');

        //set click to remove the element
        $(delLink).click(function () {
            $(div1).remove();
        });

        $(div1).append($('#newlinktpl').html());
        $(div1).append(delLink);
        // remove class hasDatePicker
        $(div1).find('.datepicker').removeClass("hasDatepicker");
        //renema input
        $(div1).find('.datepicker').attr("ID","newInput"+ct);
        //set the new input element how datepicker 
        $(div1).find('.datepicker').datepicker({
            inline: true,
            dateFormat: "yy-mm-dd"
        });

        $('#newlink').append(div1);
    }
    // function to delete the newly added set of elements
    function delIt(eleId) {
        d = document;
        var ele = d.getElementById(eleId);
        var parentEle = d.getElementById('newlink');
        parentEle.removeChild(ele);
    }

Thanks.With this solution, from the second added container/element the picker ui shows up but input box does not take value from it :( — aqua, Jun 17 '14 at 07:12
I Upate the code, Insetted a line that change the "ID" from the new picker "($(div1).find('.datepicker').attr("ID","newInput"+ct);", in the Fiddle the problem that you rou report is solved. See here http://jsfiddle.net/L3X4D/1/ — Samuel, Jun 17 '14 at 11:36

jquery ui datepicker not working on adding new input field

2 Answers2