Liferay.AutoFields and DatePicker in Liferay

Question

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 right 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

Answer 1

Got it Fixed. Thanks again to this thread -

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