DatePicker在Bootstrap 3（Safari / Chrome）中的模态窗口上无法正常显示

Question

我正在使用AdminLTE / Bootstrap作为后端仪表板，并且在显示带有DatePickers的模态窗口时遇到问题。

我有以下JS代码从其他页面加载内容（我只是将类加载外部添加到链接）：

$('.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中使用。

知道为什么会这样吗？

Answer 1

如下所述： https://stackoverflow.com/a/15183778/1041895

只需使用css，并将z-index设置为大于1150，即模态z-index。

<style>
    .datepicker{z-index:1151 !important;}
</style>