javascript - jQuery UI 对话框上的日期选择器在第二次打开对话框时失败

Question

我有一个带有链接的静态页面，该链接打开一个加载子页面的模态对话框。子页面包含带有日期选择器小部件的输入。

当我第一次打开对话框时，子页面加载并且日期选择器出现并正常运行。

当我关闭 Dialog 并再次打开它时，子页面加载了，但 Datepicker 没有出现，也没有报告错误。我认为这可能是因为 Dialog 在关闭时会留下残余物，因此重新打开它会再次加载到子页面中，但 Datepicker 会忽略重复的实例。

对话设置/调用很简单:

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

有没有办法以正确的方式关闭对话框，以便将其彻底删除并仍然可以再次打开？我尝试了 destroy()，但对话框再次运行时出现问题。

我确实注意到，由于 Dialog 将其生成的代码放在我页面的 form 标记之后，我可以使用以下方法将其全部删除:

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

所以我可能会在 Dialog 的 close 事件中尝试这样做，尽管它很老套。

Answer 1

jQuery 的 DatePicker 有一些奇怪的怪癖。 Fit.UI(内部使用 jQuery 的 DatePicker)弥补了其中的一些不足，并在移动设备上提供了原生体验，添加了各种额外功能，并提供了传统的面向对象 API。因此，如果您对不是“纯 jQuery”的解决方案没问题，那么考虑一下:https://fitui.org/Control-DatePicker.html

(我有偏见 - 我使用 Fit.UI)

如果你想使用它，你应该在 npm 上安装更新的包，或者从 GitHub 下载最新版本。