CODEWITHSUNDEEP
javascriptjquery
Vitor Silva
Vitor Silva

Reputation: 17632

duplicating jQuery datepicker

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.

Upvotes: 15

Views: 9638

Answers (4)

Ryan Stemkoski
Ryan Stemkoski

Reputation:

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 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 .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();
});

Upvotes: 4

Ryan Duffield
Ryan Duffield

Reputation: 19029

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();
}

Upvotes: 7

Dave Ward
Dave Ward

Reputation: 60580

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.

Upvotes: 12

philip_kobernik
philip_kobernik

Reputation: 436

The html I am cloning has multiple datepicker inputs.

Using Ryan Stemkoski's answer and Alex King's comment, I came up with this solution:

var clonedObject = this.el.find('.jLo:last-child')
clonedObject.find('input.ui-datepicker').each(function(index, element) {
    $(element).removeClass('hasDatepicker');
    $(element).datepicker();
});
clonedObject.appendTo('.jLo');

Thanks yall.

Upvotes: 0

Related Questions