<p>The <code>datepicker</code> function only works on the first input box that is created.</p>

<p>I'm trying to duplicate a datepicker by cloning the <code>div</code> that is containing it.</p>

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

<p>To initialize the datepicker, according to the <a href="http://docs.jquery.com/UI/Datepicker" rel="nofollow noreferrer">jQuery UI documentation</a> I only have to do <code>$('#example').datepicker();</code> and it does work, but only on the first datepicker that is created.</p>

<p>The code to duplicate the <code>div</code> is the following:</p>

<pre><code>$("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();
});
</code></pre>

<p>The strangest thing is that on the <code>document.ready</code> I have:</p>

<pre><code>$('#template #example').datepicker();
$("#template #txt").click(function() { alert($(this).val()); });
</code></pre>

<p>and if I click on the <code>#txt</code> it always works.</p>

[{'answer_id': 34807, 'author': 'Dave Ward', 'author_id': 60, 'author_profile': 'https://Stackoverflow.com/users/60', 'pm_score': 4, 'selected': False, 'text': '<p>I use a CSS class instead:</p>\n\n<pre><code>&lt;input type="text" id="BeginDate" class="calendar" /&gt;\n&lt;input type="text" id="EndDate" class="calendar" /&gt;\n</code></pre>\n\n<p>Then, in your <code>document.ready</code> function:</p>\n\n<pre><code>$(\'.calendar\').datepicker();\n</code></pre>\n\n<p>Using it that way for multiple calendar fields works for me.</p>\n'}, {'answer_id': 34855, 'author': 'Ryan Duffield', 'author_id': 2696, 'author_profile': 'https://Stackoverflow.com/users/2696', 'pm_score': 4, 'selected': True, 'text': '<p>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 <code>div</code> (to be called after each duplication). Something like:</p>\n\n<pre><code>function makeDatePickers() {\n  $("#template input[type=text]").datepicker();\n}\n</code></pre>\n'}, {'answer_id': 1423156, 'author': 'Community', 'author_id': -1, 'author_profile': 'https://Stackoverflow.com/users/-1', 'pm_score': 2, 'selected': False, 'text': '<p>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 <code>.datepicker()</code> function. The result is when you try to copy the code and initiate a new instance of the calendar for that new section it fails because the according to the CSS there already is one. If you attempt to use <code>.datepicker(\'destroy\')</code> 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...</p>\n\n<p>Below is the code I was using. Hopefully this saves someone else some time...</p>\n\n<pre><code>$(\'#addaddress\').click(function() {\n  var count = $(\'.address_template\').size();\n  var html = $(\'.address_template\').eq(0).html();\n  $(\'#addaddress\').before(\'&lt;div class="address_template"&gt;\' + html + \'&lt;/div&gt;\');\n  $(\'.address_template H1\').eq(count).html("Previous Address " + count);\n  $(\'.address_date\').eq(count).attr("class","address_date");\n  $(\'.address_date\').eq(count).attr("id","movein" + count);\n  $("#movein" + count).datepicker();\n});\n</code></pre>\n'}, {'answer_id': 9199379, 'author': 'philip_kobernik', 'author_id': 1128839, 'author_profile': 'https://Stackoverflow.com/users/1128839', 'pm_score': 0, 'selected': False, 'text': "<p>The html I am cloning has multiple datepicker inputs.</p>\n\n<p>Using Ryan Stemkoski's answer and Alex King's comment, I came up with this solution:</p>\n\n<pre><code>var clonedObject = this.el.find('.jLo:last-child')\nclonedObject.find('input.ui-datepicker').each(function(index, element) {\n    $(element).removeClass('hasDatepicker');\n    $(element).datepicker();\n});\nclonedObject.appendTo('.jLo');\n</code></pre>\n\n<p>Thanks yall.</p>\n"}]
['https://Stackoverflow.com/questions/34790', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/1842864/']