duplicating jquery datepicker

Question

the datepicker function only works on the first input box that is created.

i'm trying to duplicate a datepicker by cloning the div that is containing it.

<a href="#" id="dupMe">click</a>
<div id="template">
input-text <input type="text" value="text1" id="txt" />
date time picker <input type="text" id="example" value="(add date)" />
</div>

to initialize the datepicker, according to the jQuery UI documentation I only have to do $('#example').datepicker(); and it does work but only on the first datepicker that is created.

the code to duplicate the div is the following

$("a#dupMe").click(function(event){
 event.preventDefault();
 i++;
 var a = $("#template").clone(true).insertBefore("#template").hide().fadeIn(1000);
 a.find("input#txt").attr('value', i);
 a.find("input#example").datepicker();
});

the strangest thing is that on the document.ready i have

$('#template #example').datepicker();
$("#template #txt").click(function() { alert($(this).val()); });

and if i click on the #txt it always works.

Answer 1

I use a CSS class instead:

<input type="text" id="BeginDate" class="calendar" />
<input type="text" id="EndDate" class="calendar" />

Then, in your document.ready function:

$('.calendar').datepicker();

Using it that way for multiple calendar fields works for me.

Answer 2

Only one element can have a given id.

Answer 3

I'd recommend just using a common class name as well. However, if you're against this for some reason, you could also write a function to create date pickers for all text boxes in your template div (to be called after each duplication). Something like:

        function makeDatePickers()
        {
            $("#template input[type=text]").datepicker();
        }

Answer 4

I had a very similar problem which after hours of testing I found a solution. I was copying a block of HTML code and inserting it after a section that already contained a jQuery date picker calendar. What I failed to realize at first was the jQuery UI calendar modifies the class of the element when executing the .datepicker() function. The result is when you try to copy the code and initiate a new instace of the calendar for that new section it fails because the according to the CSS there already is one. If you attempt to use .datepicker('destroy') this fails to destroy this ghost instance because it doesn't actually exist. I solved the problem by resetting the class of the date picker element in my HTML then adding the datepicker to that element...

Below is the code I was using. Hopefully this saves someone else some time...

$('#addaddress').click(function() {
 var count = $('.address_template').size();
 var html = $('.address_template').eq(0).html();
 $('#addaddress').before('<div class="address_template">' + html + '</div>');
 $('.address_template H1').eq(count).html("Previous Address " + count);
 $('.address_date').eq(count).attr("class","address_date");
 $('.address_date').eq(count).attr("id","movein" + count);
 $("#movein" + count).datepicker();
});