jQuery UI datepicker reinstantiation blues

Question

I am having some trouble with jQuery UI's datepicker script and am hoping someone here may be able to help.

I need to be able to dynamically create the elements that require the datepicker plugin, then destroy them, then re-create them. (I make heavy use of jTemplates for this.)

Unfortunately, datepicker only appears to work the first time an element is created, even when it is reinstantiated.

For example, let's say I have inserted the following html into the DOM dynamically using jTemplates:

<div id="dateWrapper">
   <input type="text" id="dateChooser" />
</div>

I then instantiate the datepicker:

$("#dateChooser").datepicker();

This works like a charm.

However, if I then remove the dateWrapper element from the DOM...

$("#dateWrapper").remove();

...and then re-insert it a second time using jTemplates, exactly the same as before, a second call to instantiate datepicker...

$("#dateChooser").datepicker();

...no longer works.

I have tried calling datepicker's destroy method before removing #dateWrapper from the DOM, and I have even manually tried removing the #ui-datepicker-div that gets injected into the bottom of the DOM when datepicker is first instantiated. However neither of these has fixed the problem.

Does anyone have any other ideas? I would hate to have to ditch datepicker, as it is a nice little calendar, and I am already making heavy use of jQuery UI. However this may be a dealbreaker for me if I can't find a workaround.

Thanks (in advance) for your help.

Travis

Answer 1

I believe you have to use the datepicker('destroy') method for removing the datepicker, like this:

var date = $('#date');

date.datepicker();

$('#create').click(function(){
    date.datepicker();

    return false;
});

$('#destroy').click(function(){
    date.datepicker("destroy");

    return false;
});

See: http://jsfiddle.net/ESX3P/