UI对话框下方的jQuery datePicker？答案

【问题标题】：jQuery datePicker below UI dialog?UI对话框下方的jQuery datePicker？
【发布时间】：2009-10-08 17:43:03
【问题描述】：

点击显示容器链接后，日期选择器组件 - 第二个输入 - 显示在 UI 对话框下方。我应该怎么做才能在 UI 对话框上方显示它？

【问题讨论】：

标签： jquery jquery-ui dialog datepicker z-index

【解决方案1】：

您可以将 .ui-datepicker 的 z-index 设置为 1003。

.ui-datepicker
{
  z-index: 1003;
}

目前，.ui-widget-overlay 的 z-index 为 1001，.ui-dialog 的 z-index 为 1002。datepicker 没有 z-index，默认低于 z-index这些其他的。将它提高到更高的 z-index，它应该会出现在对话框上方。

【讨论】：

【解决方案2】：

我遇到了类似的问题，但日期选择器对话框中有一个 style="z-index:1"，这让我很困扰。

所以我不得不添加 !important 关键字。

.ui-datepicker {
  z-index: 1003 !important;
}

【讨论】：

所有这些覆盖 z-index 的建议都让我发疯了！ !important 是我错过的东西

【解决方案3】：

您需要在日期选择器上设置z-index，例如：

.ui-datepicker 
{
    z-index:20000;
}

应该适合你。

【讨论】：

【解决方案4】：

如果它是旧浏览器 (IE6)，如果 z-index 不起作用，您可能需要“BGIFrame”插件并设置对话框选项以使用它？

【讨论】：

【解决方案5】：

我已经通过在 JS 上添加这个来修复

  //allow interaction of select2, date and time picker on jQuery UI dialog
    $.ui.dialog.prototype._allowInteraction = function(e) {
    return !!$(e.target).closest('.ui-dialog, .ui-datepicker, .select2-drop').length;
  };

【讨论】：