角度材料md-datepicker里面的bootstrap模态

Question

我想md-datepicker在Bootstrap模式中使用Angular材质, 但是在点击模态弹出窗口隐藏的日期时.我该如何解决这个问题？

<div class="modal fade " tabindex="-1" role="dialog">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close forVideoStop" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Introduction video for body composition ...</h4>
         </div>
         <div class="modal-body">
            <md-datepicker ng-model="myDob" md-placeholder="Enter date" name="dateField" max-date="maxDate"></md-datepicker>
         </div>
      </div>
   </div>
</div>

<div class="modal fade " tabindex="-1" role="dialog">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close forVideoStop" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Introduction video for body composition ...</h4>
         </div>
         <div class="modal-body">
            <md-datepicker ng-model="myDob" md-placeholder="Enter date" name="dateField" max-date="maxDate"></md-datepicker>
         </div>
      </div>
   </div>
</div>

怎么样......

在display: block模态类中禁用后......

Answer 1

接受的答案不起作用@angular/material 5.0.0-rc0.

而是添加<your_component>.component.scss文件:

::ng-deep .cdk-overlay-container{
    z-index: 1200 !important;
}

由于视图封装,需要使用:: ng-deep(或/ deep /)前缀.请注意,deep在文档中被标记为已弃用,并且使用cdk-overlay-container可能不是一个好习惯,因为将来的材料模块更改可能会破坏它.

Answer 2

我遇到了同样的问题，发现对类似问题的解决方案实际上解决了问题。您只需要在模式窗口的HTML代码中添加以下样式：

<style>
    .md-datepicker-calendar-pane {
        z-index: 1200;
    }
</style>

对该问题的另一个赞同的答案是，您还可以修改angular-material.css文件并在那里更改z-index，但是我不建议您修改源文件，因为如果您决定更新库，则所做的更改可能会被还原。