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

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

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

$(".cloneDiv").clone().appendTo("#copyHolder");

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

$(".hasDatepicker").removeClass("hasDatepicker").removeAttr("id");

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:

$(".inputDate").datepicker();

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

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.

$('#addnew').click(function(){
   $(".datepick").datepicker("destroy"); //Distroy the date picker.

   /* Code to add a new row */

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

})

This is ur Answer I have done it......

 $(function(){
        // start a counter for new row IDs
        // by setting it to the number
        // of existing rows
        $('.datepick').datepicker();

        var newRowNum = 0;

        // bind a click event to the "Add" link
        $('#addnew').click(function(){
            // 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
            addRow.before(newRow);

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

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

            // prevent the default click
            return false;
        });

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.