Bootstrap DateTimePicker 隐藏在 JQuery 对话框中

Question

我在 JQuery 对话框中有一个 bootstrap 日期时间选择器 (as here)。但是，当显示日期时间选择器时，当我希望它显示在对话框顶部时，它隐藏在对话框内部。

这是目前的样子：

如您所见，这远非理想。

我已经研究过，我似乎找到的唯一解决方案是将 z-index 增加到一个很大的值，但这似乎不起作用。我已经用许多不同的类尝试过它，例如 .datepicker .ui-datepicker .bootstrap-datetimepicker-widget 也尝试过使用和不使用 !important 但似乎没有任何效果。

还有人有其他想法吗？

我的代码如下：

<div class="mui-textfield">
    <input type="date" id="txtDate"/>
    <label>Date</label>
</div>

$('#txtDate').datetimepicker({
    format: 'DD-MM-YYYY',
    keepOpen: false
});

Answer 1

z-index 确实是我的问题，但是，我还必须在对话框和对话框内容 div 上设置 overflow: visible 才能将其转义。这是最终对我有用的css：

.datepicker
{
    z-index: 99999   !important;
}
.ui-dialog {
    overflow:visible !important;
}
.ui-dialog-content {
    overflow:visible !important;
}

Bootstrap DateTimePicker 隐藏在 JQuery 对话框中

Bootstrap DateTimePicker hidden inside JQuery Dialog

jquery

datetimepicker

twitter-bootstrap