problem when cloning jQuery UI datepicker

Question

I have a div in which there is a datepicker. I use something like this to clone it:

mydiv = $('#someDiv');

// works fine so far
mydiv.find('input.datefield').datepicker();

// clone without the events and insert
newDiv = myDiv.clone(false).insertAfter(myDiv);

// datepicker won't re-init if this class is present
newDiv.find('.hadDatepicker').removeClass('hadDatepicker');

// reinitialize datepicker
newDiv.find('input.datefield').datepicker();

This is a stripped down version of my code. It works and the calendar shows up as expected where it is expected .. but when a date is clicked, the previous datepicker's value gets updated.. (the one from which it was cloned).

I've tried to destroy the (inexisting) instance before like this:

newDiv.find('input.datefield').datepicker('destroy').datepicker();

No luck ..

I've checked how it keeps track of instances and manually cleared the data like this:

newDiv.find('input.datefield').data('datepicker', false).datepicker('destroy').datepicker();

Still no luck.

What I don't understand is that only the date selection behavior is buggy, everything else works as expected.

I really don't know what else to check now ..

Answer 1

This works for me with jQuery UI 1.7.2

var mydiv = $('#someDiv');
mydiv.find('input.datefield').datepicker();
var newDiv = mydiv.clone(false).attr("id", "someDiv2").insertAfter(mydiv);
newDiv.find('input.datefield')
  .attr("id", "")
  .removeClass('hasDatepicker')
  .removeData('datepicker')
  .unbind()
  .datepicker();

Check http://jsbin.com/ahoqa3/2 for a quick demo

btw. you seem to have different errors in the code of your question. The css class is hasDatepicker not hadDatepicker and at one time you wrote mydiv and the next time the variable is myDiv which isn't the same.