jquery datepicker on a cloned form element

Question

EDIT : I am able to get the date picker on cloned form element but when i select a date, the date is populated on the first div form element, rather than cloned form element

I am having problems in displaying a datepicker on a cloned form element.

I have initialized a div (PopupReset div having a jsp form in it).

when a button clicked I am copying and displaying the content of PopupReset in another div called "Popup" as modal dialog.

<div id="PopupReset" style="display:none;">
<jsp:include page="Popup.jsp"></jsp:include>
</div>


<div id="Popup" style="display:none"></div>

datepicker in both divs look same when I looked at the source code. But datepicker working on first div "PopupReset" where as it is not working modal dialog, which has copy of "PopupReset" html.

 <input type="text" name="enteredOn" size="10" maxlength="10" value="" id="_enteredOn" 
 class="enterDate hasDatepicker">

  jQuery( ".enterDate" ).datepicker({
        showOn: "focus",
        changeMonth: true,
        changeYear: true,
        dateFormat: dateFormat(),
        yearRange: "1901:-0"

        });

i am having the form cloned due to some constraints on the requirements.

Please share any ideas on how to work this out.

I appreciate your help!

Thank you, Sri

score 0 · Answer 1 · answered Aug 22 '14 at 21:17

You didn't include the javascript-call to initialize the datepicker, but I guess the problem is that the second datepicker is created dynamically. In this case you have to adjust the javascript / jQuery e.g. like this:

$('body').on('click',".enterDate", function(){
 $(this).datepicker();
});

This is called event-delegation: the click-event is bound to the body-element which delegates the click-event to all elements with the class "datepicker", even if those aren't present in the actual document but added later.

Update: Adjusted the class name to the class name of adjusted question.

I updated my question. I could see "hasDatePicker" class on the cloned form element BUT datepicker not funcitonal on the second div. — Sri, Aug 22 '14 at 21:20

score 0 · Answer 2 · edited May 23 '17 at 11:57

0

EDIT : I am able to get the date picker on cloned form element but when i select a date, the date is populated on the first div form element, rather than cloned form element

$(".enterDate").removeClass('hasDatepicker').datepicker();

worked for me.

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

Thank you Kishore I upvoted your answer and Thank you matthia_h

edited May 23 '17 at 11:57

Community

1
1

answered Aug 22 '14 at 21:42

Sri

1,205
2
21
52

jquery datepicker on a cloned form element

2 Answers2