adding jquery ui datepicker dynamically style break?

Question

read this before adding time jquery ui datepicker dynamically? I have problem the JQ datepicker UI the style will break up after I add new row! did anyone had this Problem before. see the photo for more detail of the bugs the number are from datepicker UI

enter image description here

 <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's 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>

score 2 · Answer 1 · edited May 23 '17 at 10:30

2

this problem is due to the following : when you clone your tr there an other css class that jquery added to your that input : hasdatepicker, you can verfify this on the source of your page, you'l find this:

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

this is well explained here :

jQuery DatePicker not working on newly added row

what i suggest to you is not to clone your tr but to add html code with jquery also i think your code can be more simplified , tell me exaclty what you want to i may help you

edited May 23 '17 at 10:30

Community

1
1

answered Sep 02 '12 at 12:51

fatiDev

5,752
7
28
45

I am trying to create time-sheet spreedsheet but first I have to get the UI fix – Sep 04 '12 at 13:27
yes but I will break the Jquery UI Datepicker style try this action 1-click add new row ,click on text box to select the date finally click new row you will see it break the UI style – Sep 04 '12 at 14:32
add this the two line after this line on your jquery code addTableRow($("table")); – fatiDev Sep 04 '12 at 14:42
it works when you add this , but the problem is that it works for twice , the third tiùe it breaks ! – fatiDev Sep 04 '12 at 14:43

score 1 · Answer 2 · edited Sep 19 '12 at 13:02

1

When input elements' IDs are same, that's the standart behaviour of the Datepicker script. So I suggest you to assign unique IDs (like IDs with random numbers) therefore no collision will occur.

edited Sep 19 '12 at 13:02

Asciiom

9,867
7
38
57

answered Sep 19 '12 at 07:28

Tarcan

11
2

fatiDev · Answer 3 · 2012-09-04T13:59:43.840

0

i propose to you a simple solution : you'll do as the following when click to button you'll remove the second class added by jquery: hasDatepicker, and then call the datepicker a second time :

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

try this demo

edited Sep 04 '12 at 13:59

answered Sep 02 '12 at 13:09

fatiDev

5,752
7
28
45

adding jquery ui datepicker dynamically style break?

3 Answers3

Linked