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

Question

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

<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

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

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

同一问题的other upvoted answer表示您还可以修改angular-material.css文件并在那里更改z-index，但我不建议您修改源文件，因为您的更改可能如果您决定更新库，则还原。

Answer 3

对我来说 "@angular/material": "^11.2.13" 的工作解决方案是在下面添加我的全局 css 文件。

.cdk-overlay-container { z-index: 1200; }

Answer 4

使用@ angular / material 5.2.4的工作解决方案是在部分之后添加我的css文件。

.cdk-overlay-container { 
    z-index: 1200; 
}