[ACCEPTED]-datepicker on dynamically created row with inputs-datepicker

Accepted answer
Score: 14

Try this, when you add a row, destroy all 2 the datepicker instances and then rebind 1 the datepicker after you append a new row.

jsFiddle example

Score: 2

In my case, I use clone() to create a copy of datepicker.


Then 14 I remove the "class" and "id" that datepicker 13 has added to input elements.


NOTE: Since 12 the input elements are to be cloned, I don't 11 give them the "id" attribute. So datepicker 10 automatically adds "id" to my DOM element. In 9 addition, if the element to be cloned has 8 user assigned "id" which means there will 7 be at least two elements sharing the same 6 "id", datepicker will have some problem 5 to find the correct one. An example can 4 be found in @j08691 's answer.

Finally, re-bind 3 datepicker to input elements:


All the input 2 elements with class "inputDate" will have 1 datepicker.

Score: 2

Destroy the datepicker and create once again 2 after added the new row. It will resolve 1 the issue.

Here is the example

jQuery( ".datepick" ).datepicker(); //Add date picker.

   $(".datepick").datepicker("destroy"); //Distroy the date picker.

   /* Code to add a new row */

   jQuery( ".datepick" ).datepicker(); //recreating the date picker

Score: 1
This is ur Answer I have done it......

        // start a counter for new row IDs
        // by setting it to the number
        // of existing rows

        var newRowNum = 0;

        // bind a click event to the "Add" link
            // increment the counter
            newRowNum = $(productTable).children('tbody').children('tr').length +1;

            // get the entire "Add" row --
            // "this" refers to the clicked element
            // and "parent" moves the selection up
            // to the parent node in the DOM
            var addRow = $(this).parent().parent();

            // copy the entire row from the DOM
            // with "clone"
            var newRow = addRow.clone();

            // set the values of the inputs
            // in the "Add" row to empty strings
            $('input', addRow).val('');

            // insert a remove link in the last cell
            $('td:last-child', newRow).html('<a href="" class="remove"><i class="icon-minus"><\/i><\/a>');

            // insert the new row into the table
            // "before" the Add row

            // add the remove function to the new row
            $('a.remove', newRow).click(function(){
                return false;               

            $('#date', newRow).each(function(i){
              var newID = 'date_' + newRowNum;
           $(this).attr('id', newID).removeClass('hasDatepicker')

            // prevent the default click
            return false;


Score: 0

There is a javascript error showing in the 2 Chrome console:

Uncaught TypeError: Cannot read property 'inline' of undefined 

This is probably shutting 1 down the datepicker functionality.

More Related questions