Datepicker on jQuery UI dialog fails on second opening of dialog

Question

I have a static page with a link that opens a modal Dialog that loads a sub-page. The sub-page includes an input with a Datepicker widget.

When I first open the Dialog, the sub-page loads and the Datepicker appears and functions normally.

When I close the Dialog and open it again, the sub-page loads, but the Datepicker does not appear, and there are no reported errors. I assume this might be because Dialog leaves remnants around when it's closed, so re-opening it loads in the sub-page again, but Datepicker ignores the duplicated instance.

The Dialog setup/call is simply:

$("a#Popup").click(function() {
  var subpage = $("div#SubPage")
    .dialog({ autoOpen: false, width: 480, minHeight: 280, modal: true });
  var addr = $("a#Popup").attr('href');
  subpage.load(addr);
  subpage.dialog('open');
  return false;
});

Is there a way to proper way to close the Dialog so it is removed cleanly and can still be opened again? I experimented with destroy(), but had problems with the Dialog functioning again.

I did notice that, since Dialog puts its generated code after my page's form tag, I can remove it all using:

$("form").nextAll().remove();

so I might try that in Dialog's close event, though it's hacky.

Answer 1

jQuery's DatePicker has some odd quirks. Fit.UI (which internally uses jQuery's DatePicker) compensates for some of them, as well as provide a native experience on mobile devices, add various extra features, and provides a traditional Object Oriented API. So if you are okay with a solution that is not "pure jQuery", then consider this: https://fitui.org/Control-DatePicker.html

(I'm biased - I work with Fit.UI)

You should install the updated package on npm if you want to use it, or download the most recent version from GitHub.