引导模态内的角材料 md-datepicker答案

【问题标题】：angular material md-datepicker inside bootstrap modal引导模态内的角材料 md-datepicker
【发布时间】：2017-03-19 21:35:44
【问题描述】：

我正在尝试在 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 后...

【问题讨论】：

如何让日期选择器首先呈现？尝试了很多东西，只是没有显示选择框。

标签： css bootstrap-modal angular-material

【解决方案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 可能不是一个好习惯，因为未来的材料模块更改可能会破坏它。

【讨论】：

::ng-deep 已弃用

【解决方案2】：

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

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

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

【讨论】：

这不适用于材料 8.1.2。即使使用 Angular 8，ng-deep 的答案也有效。

【解决方案3】：

@angular/material 5.2.4 的工作解决方案是将我的 css 文件添加到以下部分。

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

【讨论】：

【解决方案4】：

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

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

【讨论】：