datepicker dynamic

datepicker dynamic

Dear members,

I am unable to add jquery datepicker to a dynamically created textbox.
the datepicker is working fine on the first row, which is present on the first load of the page.
here is the code.

script to dynamic adding rows with fields.

  <%-- Document Add --%>
        <script type="text/javascript">
            // $(document).ready(function ()
            $(document).ready(function () {

                $(document).on("click", ".classAddDoc", function () {
                    var templateRow = "<tr><td valign='top'> <input name='txtDocType' id='txtDocType' type='text'/></td>" +
                                      "<td>&nbsp; <input name='txtDocTitle' id='txtDocTitle ' type='text'/></td>" +
                                      "<td>&nbsp; <input name='txtDescription' id='txtDescription ' type='text'/></td>" +

                                      "<td>&nbsp; <input name='txtDate' id='txtDate ' class='date-picker' onkeypress='alert1()' type='text'/></td>" +
                                      "<td>&nbsp; <input name='txtRemarks' id='txtRemarks ' type='text'/></td>" +
                                       "<td valign='top'>&nbsp;<input name='fuDoc' id='fuDoc' type='file'/></td>" +
                                      "<td valign='top'> &nbsp;<input id='btnDocAdd' type='button' value='+' class='btn btn-sm btn-primary classAddDoc'/> <input id='btnDocDelete' type='button' value='-' class='btn btn-sm btn-danger classRemoveDoc'/> </td>" +
                                   "</tr>";

                    $('#doctable').append(templateRow);
                    //$("#txtDate").datepicker();
                   // $('.date-picker').datepicker("refresh");
                    $(document).on('focus', ".date-picker", function () {
                        $(this).datepicker();
                    });
                });


                $(document).on("click", ".classRemoveDoc", function () {
                    if ($("tr").length == 1) { alert("you can't delete last row"); }
                    else { $(this).closest("tr").remove(); }
                });
            });
    </script>


datepicker script:

 <%--DATE PICKER--%>

  <script type="text/javascript">
    //  $(".doctable").delegate(".date-picker", "focusin", function () {
        //  $(this).datepicker();
      //});
      jQuery(function ($) {
          $('.date-picker').datepicker({
              format: "dd/mm/yyyy",
              autoclose: true,
              todayHighlight: true
          });
      });
</script>


and div which has the dynamic fields.




<div id="profile15" class="tab-pane">
                     <table id="doctable">
                        <thead>
                            <tr>
                                <th>Document Type</th>
                                <th>Document Title</th>
                                <th>Description</th>
                                <th>Date</th>
                                <th>Remarks</th>
                                <th>FileUpload</th>

                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><input type="text" name="txtDocType" id="txtDocType"/></td>
                                <td><input type="text" name="txtDocTitle" id="txtDocTitle"/></td>
                                <td><input type="text" name="txtDescription" id="txtDescription"/></td>
                                <td><asp:TextBox ID= "txtDate1" CssClass="form-control date-picker" onkeypress="alert1()" runat="server"></asp:TextBox></td>
                                <%--<td><input type="text" name="txtDate" id="txtDate"/></td>--%>
                                <td><input type="text" name="txtRemarks" id="txtRemarks"/></td>
                                <td><input type="file" name="fuDoc" id="fuDoc"/></td>
                                <td><input id="btnDocAdd" type="button" value="+" class='btn btn-sm btn-primary classAddDoc'/> 
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    
                </div>




///////////////////

it is lengthy. but somebody please help. Please.