日期時間選擇器不能在模態窗口引導程序上正確顯示

Question

我正在使用此庫https://www.npmjs.com/package/angularjs-datetime-picker顯示日期時間選擇器，但由於某種原因，模態窗口上的顯示不正確。

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Add new class</h4>
            </div>
            <div class="modal-body">
                <form role="form">
                    <div class="form-group">
                        <input type="text" date-format="yyyy-MM-dd HH:mm:ss" hour="09" minute='00' name="time" ng-model="clas.class_.time" datetime-picker  class="form-control input-lg" tabindex="3">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-success" ng-click="clas.create()" data-dismiss="modal">Create</button>
            </div>
        </div>
    </div>
</div>

有人知道這個問題嗎？

點擊這里查看圖片

Answer 1

看起來像是z-index問題。 嘗試在CSS中將模式Z索引設置為較低，和/或將日期選擇器的Z索引設置為較高：

.modal{
   z-index: 200;
}
.datepicker{
   z-index: 999;
}

Answer 2

這是一個CSS問題，默認情況下， 引導模態的z-index: 1050; 。 嘗試像這樣向您的datetime-picker添加更高的z-index ：

.angularjs-datetime-picker {
    z-index:5000;
}