DatePicker 在 Bootstrap 3 (Safari/Chrome) 的模式窗口中未正确显示

Posted 2023-05-07

【中文标题】DatePicker 在 Bootstrap 3 (Safari/Chrome) 的模式窗口中未正确显示

【英文标题】：DatePicker not showing properly on a modal window in Bootstrap 3 (Safari/Chrome)

【发布时间】：2016-10-24 23:57:07

【问题描述】：

我正在将 AdminLTE/Bootstrap 用于后端仪表板，但在显示带有 DatePickers 的模态窗口时遇到问题。

我有以下 JS 代码来加载其他页面的内容（我只是将类 load-external 添加到链接）：

$('.load-external').click(function(ev) 
    var href = $(this).attr('href');
    $('#externalModal').find('.modal-body').load(href);
    $('#externalModal').find('.modal-title').text($(this).attr('data-confirm-title'));
    $('#externalModal').modal(
        show: true
    );
    return false;
);

问题是当我在 div 中加载带有 DatePicker 的表单时，例如：

<input id="agreement_payment_estimatedPayingDate"
    name="agreement_payment[estimatedPayingDate]" 
    class="form-control" 
    required="required" 
    type="date" 
    value="2016-06-22"
    data-date-format="yyyy-mm-dd"
    data-provide="datepicker" />

DatePicker 显示在模态窗口下方

在 Firefox 中它可以正常工作，但在 Chrome 和 Safari 中都不能。

知道为什么会发生这种情况吗？

【参考方案1】：

就像这里描述的： https://***.com/a/15183778/1041895

使用css，设置z-index大于1150，即模态z-index。

<style>
    .datepickerz-index:1151 !important;
</style>