角度材质DatePicker日历显示角度模态

Question

我有以下简单的代码:

                <md-content>
                <md-datepicker ng-model="startDate" md-placeholder="Enter date">
                </md-datepicker>
                </md-content>

它填充很好,但是当你点击它时,我能看到的日历会在角度模态窗口后面的阴影中弹出.

*我正在使用此日期选择器:https://material.angularjs.org/latest/demo/datepicker

Answer 1

你只需要把它放到模态的html模板中:

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

Answer 2

接受的答案已过时。对于@angular/material 5.0.0-rc0已成功使用：

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

/sf/answers/3309228611/

Answer 3

我最终进入 angular-material.css 并将 Z-index 更改为 1151。

 .md-datepicker-calendar-pane {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1151;
  border-width: 1px;
  border-style: solid;
  background: transparent;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  transition: -webkit-transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); }
  .md-datepicker-calendar-pane.md-pane-open {
    -webkit-transform: scale(1);
            transform: scale(1); }