Datepicker角材料轮廓图，将标题放在顶部

Question

我正在尝试创建一个没有理想轮廓版本的Angular Material Datepicker。有人将如何创建它？

<mat-form-field appearance="outline">
    <input matInput [matDatepicker]="picker" placeholder="Effective Start Date">
    <mat-datepicker-toggle matSuffix [for]="picker">
        <mat-icon matDatepickerToggleIcon>calendar_today</mat-icon>
    </mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

理想的目标是这个：

当前具有外观=“轮廓”，它正在提供视图。日期在框中，而不是在大纲标题中。

粘贴图像时，请忽略比例尺调整问题。

Answer 1

<mat-form-field appearance="outline">
<mat-label>Outline form field</mat-label>
<input matInput [matDatepicker]="picker" >
<mat-datepicker-toggle matSuffix [for]="picker">
    <mat-icon matDatepickerToggleIcon>calendar_today</mat-icon>
</mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>

使用垫标签代替占位符。