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

Hi Tina, what version of Liferay are you using? 5.2.5? – rp. Jun 13 '11 at 18:02 — rp., Jun 13 '11 at 18:02
Hi, I am using Liferay 5.2 EE SP3. – Tina Agrawal Jun 14 '11 at 07:28 — Tina Agrawal, Jun 14 '11 at 07:28

score 1 · Answer 1 · edited May 23 '17 at 12:22

1

Got it Fixed. Thanks again to this thread -

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

edited May 23 '17 at 12:22

Community

1
1

answered Jun 15 '11 at 08:04

Tina Agrawal

616
9
16

score 0 · Answer 2 · answered Jun 14 '11 at 17:02

0

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.

answered Jun 14 '11 at 17:02

rp.

3,435
1
21
29

Thanks RP. Got it working. The issue is DatePicker attaches a class hasDatePicker on the duplicated fields. So you would need to remove that class from new input fields and attach it again. – Tina Agrawal Jun 15 '11 at 08:03

Liferay.AutoFields and DatePicker in Liferay

2 Answers2