Liferay.AutoFields and DatePicker in Liferay

I have the requirement to duplicate a set of input fields on click of a button; as many times as required.

This feature is same like we do have in LIferay:

Goto "Control panel -> User", click on any user.

On righ开发者_C百科t side of the page, under Identification; click on "Addresses, Phone Numbers".

Clicking on PLUS symbol (Add button) duplicates the set of input fields .

Here is the code that I have done for my requirement.

The code for input field:

<input class="date-pick" readonly="readonly" id="<portlet:namespace/>fromDate1"   type="text" onchange="showDate()"

     name="<portlet:namespace/>fromDate1" value="" />" >

The javascript to use the value of date:

function showDate()
  {
   alert(document.getElementById("<portlet:namespace/>fromDate1"));
  }

The jQuery function to bind the datepicker with above text box:

jQuery(function(){
  jQuery('.date-pick').datepicker({autoFocusNextInput: true});
});

The Liferay.Autofields function for creating duplicate row of form fields:

jQuery(
  function () {
        new Liferay.AutoFields(
                    {
                          container: '#<portlet:namespace />webFields',
                          baseRows: '#<portlet:namespace />webFields > .lfr-form-row',
                          fieldIndexes: '<portlet:namespace />formFieldsIndexes',
                          onAdd: function(newField) {
                                      alert('This field got added.');
                                      jQuery('.date-pick').datepicker({autoFocusNextInput: true});
                                },

                          onRemove: function() {
                                      alert('The last field was removed.');
                                }
                    }
        );
  }

);

For the original set of input fields, the datepicker works properly; but for the set of input fields generated after clicking on PLUS symbol (Add button), datepicker doesn’t works.

Also as the name of input fields gets changed dynamically, so I am facing issue in using the values of input fields (see javascript function showDate()).

Have anyone worked on this or have any idea; then please help

Got it Fixed. Thanks again to this thread -

Why does jQuery UI's datepicker break with a dynamic DOM?

It appears that the AutoFields plugin is not compatible with the DatePicker plugin. The issue lies in that the JavaScript events responsible for the DatePicker widget are not getting copied correctly on the replicated fields.

I suppose you could fix that in the "onAdd" event, but I am at a loss for how you would implement that piece.