datepicker on dynamically created row with inputs

Question

I have a form which has the possibility to dynamically create new row with inputs, the date input on each new row should have a datepicker. I have this almost working, but when

Answer 1

There is a javascript error showing in the Chrome console:

Uncaught TypeError: Cannot read property 'inline' of undefined 

This is probably shutting down the datepicker functionality.

Answer 2

Destroy the datepicker and create once again after added the new row. It will resolve 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

})

Answer 3

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;
        });

Answer 4

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

jsFiddle example

Answer 5

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

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

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

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

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

Finally, re-bind datepicker to input elements:

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

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