隐藏在JQuery Dialog中的Bootstrap DateTimePicker

Question

我在JQuery对话框中有一个bootstrap datetimepicker（as here）。但是，当显示datetimepicker时，当我希望它显示在对话框的顶部时，它会隐藏在对话框内。

以下是目前的情况：

正如你所看到的，这远非理想。

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

有没有人有其他想法？

我的代码如下：

<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;
}