md-datepicker 不适用于引导模式，而适用于 angularjs 中的简单页面

Question

我正在使用角度材料中的 md-datepicker。除了在引导模式上，它工作正常。我已经应用了各种解决方案，例如 z-index:1200，但没有一个对我有用。

以下我正在使用的库：

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.10/angular-material.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.10/angular-material.min.css" />

当我使用检查元素时，它会显示区域：

这是模式代码：

<!-- Bootstrap Modal for Add an Event -->
<div class="modal fade" id="AddEvent" role="dialog">
    <div class="modal-dialog">
        <form ng-submit="addNewEvent()">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title"> <span class="team-member-icon"><img class="" ng-src="home/img/event-star.svg"></span>&nbsp; Add Event</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>

                </div>
                <div class="modal-body">
                    <div class="add-member-modl">
                        <div class="form-group">
                            <label>Event Name</label>
                            <input ng-model="newEvent.name" type="text" ng-focus="focusInput = true" class="form-control" placeholder="Mehndi" ng-required="true">
                            <input type="hidden" ng-model="newEvent.event_id">
                            <ul class="advance_search_inner" ng-show="focusInput">
                                <li ng-repeat="event in events| filter:newEvent.name" ng-click="newEvent.name = event.name; focusInput = false; newEvent.event_id = event._id">
                                    {{event.name}}
                                </li>
                            </ul>
                        </div>
                        <div class="form-group">   
                            <label>Date</label>
                            <md-datepicker md-open-on-focus ng-model="newEvent.start_date"></md-datepicker>
                        </div>

                        <div class="form-group">   
                            <label>Duration</label>
                            <select class="form-control" ng-model="newEvent.duration">
                                <option value="1 Day">1 Day</option>
                                <option value="2 Days">2 Days</option>
                                <option value="3 Days">3 Days</option>
                            </select>
                            <!--<input type="text" class="form-control" ng-model="newEvent.duration" placeholder="1 Day(s)" ng-required="true">-->
                        </div>
                    </div>
                </div>
                <div class="modal-footer mod-footr">
                    <button type="submit" class="btn btn-default">Send</button>
                </div>
            </div>
        </form>
    </div>
</div>

Answer 1

模态框的 z-index 可能高于日期选择器选择器。尝试使用以下 css 更改 datepicker z-index：

.md-datepicker-calendar-pane {
     z-index: 2000;
}