将datepicker动态添加到文本框中

Question

When my page load I have one row,by clicking add button it will add one more row. But from the below code the date picker is showing only for the first row not for dynamically adding rows. If I remove 'portion 2' code then reverse will work.I need both.Please help.

//===========portion 1============
var i = 0;  
$(document).ready(function() {
    $("#add").click(function() {
        i++;

        $(".normal-tble tbody tr:first").clone().find("input,img").each(function() {
            var tempId = $(this).attr("id");
            var name_Attr = $(this).attr("name");
            $(this).attr("id",$(this).attr("id")+"_"+(i))

            if(tempId!='availability' && tempId!='remove') {
                $(this).attr("name",name_Attr.replace('0',i));

                if(tempId=='number') {
                    $(this).on("blur",isValidNumber);
                    $(this).val(0);
                } else {
                    $(this).val('');
                }

                if(tempId=='expectedServiceDate') {
                    $(this).datepicker({changeMonth: true,changeYear: true,showButtonPanel: true,dateFormat: 'yy-mm-dd',minDate:0});
                }

            } else if(tempId=='availability') {
                $(this).on("click",checkAvaialability);
            } else if(tempId=='remove') {
                $(this).on("click",onRemove);
            }        

        }).end().appendTo(".normal-tble");

    });
//=======portion 2===============
$('#expectedServiceDate').datepicker({changeMonth: true,changeYear: true,showButtonPanel: true,dateFormat: 'yy-mm-dd',minDate:0});
//==============================================================

<table class="normal-tble">
    <thead>
        <tr>                        
            <th scope="col">Number</th>
            <th scope="col">For Service</th>
            <th scope="col">Expected Service Date</th>
            <th scope="col">Comments</th>
            <th scope="col">Check Availability</th>
            <th scope="col">Remove</th>
            <th scope="col"><img src="<c:url value="/resources/images/add2.png"/>" width="18" height="17" id="add"></th>
        </tr>
    </thead>
    <tbody>

        <tr class="second">
            <td style="text-align:center"><form:input path="premiumList[0].number" id="number" class="tfl-02 qtyText"/></td>
            <td style="text-align:center"><form:input path="premiumList[0].forService" id="forService" class="tfl-02"/></td>
            <td style="text-align:center"><form:input path="premiumList[0].expectedServiceDate" id="expectedServiceDate" class="tfl-02" readonly="true"/></td>
            <td style="text-align:center"><form:input path="premiumList[0].comments" id="comments" class="tfl-02"/></td>
            <td style="text-align:center"><img src="<c:url value="/resources/images/view.png"/>" alt="view" id="availability"></td>
            <td style="text-align:center"><img src="<c:url value="/resources/images/remove.png"/>" alt="remove" id ="remove"></td>
            <td></td>

        </tr>

    </tbody>
</table>

Answer 1

That's because the element is not yet created. In order to have an event to the dynamic rows you need this:

$("body").on("focus", ".mydate", function () {
    $(this).datepicker({
        todayBtn: "linked"
    })
});