时间戳

首页 > 解决方案 > 角度材料 - 日期选择器呈现在正文中而不是包含 div

angular - 角度材料 - 日期选择器呈现在正文中而不是包含 div

问题描述

我对 Angular Material datepicker 组件有疑问。

我创建了一个自定义组件：

<div class="custom-date-picker">
    <mat-form-field>
        <input matInput [matDatepicker]="picker" placeholder="Choose a date">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
</div>

当我将它添加到我的模态时，选择器在正文而不是模态中打开。所以它总是在页面的底部，在模态覆盖下。添加 z-index 将不起作用，因为它附加到正文，而不是我的包含 div 甚至模式。

标签： angulardatepickerangular-material

解决方案

缺少主题样式导致了这个问题。Angular CLI 没有设法添加它们，所以我不得不手动导入它们。

在我的global.scss 中，我添加了这个：

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

现在一切正常。

推荐阅读