角度材料的日期选择器不能在模态对话框中打开

问题描述

I have an angular material 2 date-picker implemented in a bootstrap modal form:

我有一个角色素材2日期选择器，以引导模式形式实现。 -dialog modal-lg>
< div class =modal-content>
< div class =modal-header>
< h4 class =modal-title> {{title}}< / h4>
< / div>
< div class =modal-body>
< div class =timeline-cal>
< input class =date-field[mdDatepicker] =pickerplaceholder =Choose a date>
< md-datepicker＃picker>< / md-datepicker>
< / div>
< div class =modal-footer>
< button type =buttonclass =btn gray-btn pull-right（click）=cancel（）>取消< / button>
< / div>
< / div>
< / div>

<div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title">{{title}}</h4> </div> <div class="modal-body"> <div class="timeline-cal"> <input class="date-field" [mdDatepicker]="picker" placeholder="Choose a date"> <md-datepicker-toggle mdSuffix [for]="picker"></md-datepicker-toggle> <md-datepicker #picker></md-datepicker> </div> <div class="modal-footer"> <button type="button" class="btn grey-btn pull-right" (click)="cancel()">Cancel</button> </div> </div></div>

然而，点击按钮后，日期选择器不会在模态对话框中打开，而是打开的背景。我尝试过，但没有帮助：

However, upon clicking the button, the datepicker wouldn't open in the modal dialog itself but opens in the background. I tried this but didn't help:

.mat-datepicker-content{    z-index: 1200}

推荐答案

试试，

try,

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

或者

Or this

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

这篇关于角度材料的日期选择器不能在模态对话框中打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！