Adding jquery ui datepicker to dynamic style?

Question

read this before dynamically adding jquery ui datepicker? I have a problem with the JQ datepicker UI when the style is broken after adding a new line! Has anyone had this problem before. see photo for more details about errors that are number from datepicker user interface

<form> <table> <thead> <tr> <th scope="col">Date</th> <th scope="col">Start Time</th> <th scope="col">End Time</th> <th scope="col">Hour Type</th> </tr> </thead> <tbody> <tr> <td><input name="date1" id="date1" class="date"></td> <td><input name="startTime1" id="startTime1"></td> <td><input name="endTime1" id="EndTime1"></td> <td> <select name="hourType1" id="hourType1"> <option value="">Please select</option> <option value="1">Regular</option> <option value="2">Overtime</option> </select> </td> </tr> </tbody> </table> <button>Add Row</button> </asp:Content> </form> <script> $(document).ready(function($) { $(".date").datepicker(); // trigger event when button is clicked $("button").click(function() { // add new row to table using addTableRow function addTableRow($("table")); // prevent button redirecting to new page return false; }); // function to add a new row to a table by cloning the last row and // incrementing the name and id values by 1 to make them unique function addTableRow(table) { // clone the last row in the table var $tr = $(table).find("tbody tr:last").clone(); // get the name attribute for the input and select fields $tr.find("input,select").attr("name", function() { // break the field name and it number into two parts var parts = this.id.match(/(\D+)(\d+)$/); // create a unique name for the new field by incrementing // the number for the previous field by 1 return parts[1] + ++parts[2]; // repeat for id attributes }).attr("id", function(){ var parts = this.id.match(/(\D+)(\d+)$/); return parts[1] + ++parts[2]; }); // append the new row to the table $(table).find("tbody tr:last").after($tr); }; }); </script> </body> 

Answer 1

this problem is explained by the following: when you clone your tr, there is another css class that jquery added to your input: hasdatepicker, you can check this at the source of your page, you will find this:

 <input name="date1" id="date1" class="date hasDatepicker"> 

this is well explained here:

jQuery DatePicker not working on newly added string

what I offer you is not to clone your tr, but add html code using jquery also I think your code can be more simplified, please tell me what you want, I can help you.

Answer 2

When the identifiers of the input elements are the same, this is the standard behavior of the Datepicker script. Therefore, I suggest you assign unique identifiers (for example, identifiers with random numbers), so no collision will occur.

Answer 3

I offer you a simple solution: when you click the button, you will do the following: you remove the second class added by jquery: hasDatepicker, and then write datepicker a second time:

 $(".date").removeClass("hasDatepicker"); $(".date").datepicker(); 

try the demo