Datepicker Angular Material Outline 表单，将标题放在顶部答案

【问题标题】：Datepicker Angular Material Outline Form, Place Title in TopDatepicker Angular Material Outline 表单，将标题放在顶部
【发布时间】：2020-03-24 03:37:57
【问题描述】：

我正在尝试创建一个没有像这样的 Ideal Outline 版本的 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>

理想的目标是这样的：

目前，外观 = "outline" 它正在提供视图。日期在方框中，而不是在大纲标题中。

粘贴图片时请忽略比例大小问题。

【问题讨论】：

标签： angular typescript angular-material angular7

【解决方案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>

使用垫标签代替占位符。

【讨论】：

【解决方案2】：

<mat-form-field class="col-md-3 mt-1" appearance="outline">
 <mat-label>Start date</mat-label>
 <input matInput [matDatepicker]="picker" disabled="false" [value]="StartDate" 
  (dateInput)=pickDateStart($event)>
 <mat-datepicker-toggle matSuffix [for]="picker">
  <mat-icon matDatepickerToggleIcon>event</mat-icon>
 </mat-datepicker-toggle>
 <mat-datepicker #picker [startAt]="" disabled="false">
 </mat-datepicker>
</mat-form-field>

【讨论】：