填充Angular Material Datepicker时如何显示占位符？答案

【问题标题】：How do I get the placeholder to display when Angular Material Datepicker is filled in?填充Angular Material Datepicker时如何显示占位符？
【发布时间】：2019-04-23 23:48:37
【问题描述】：

我正在使用 Angular Material Datepicker 功能。除了占位符之外，它工作正常。在文档中，当输入中填写日期时，占位符会变成一个小标签。我的正在消失。

我尝试更改 css 以使其正常工作，甚至尝试使用 mat-label 但没有成功。

<input matInput [matDatepicker]="payBeginningDate" formControlName="payBeginningDate" id="payBeginningDate" placeholder="Beginning Date">
<mat-datepicker-toggle matSuffix [for]="payBeginningDate"></mat-datepicker-toggle>
<mat-datepicker #payBeginningDate></mat-datepicker>

我只是希望“开始日期”的占位符像文档中的标签一样缩小日期字段。

【问题讨论】：

您的标签实际上完全消失了吗？甚至在对 CSS 进行任何更改之前？
是的......一旦我开始填写日期，它就会消失，而不是像“普通”垫输入字段那样在其上方设置动画。

标签： angular datepicker angular-material

【解决方案1】：

试试下面的代码；

在您的代码中导入下面的 CSS 文件；

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

    <mat-form-field>
<input matInput [matDatepicker]="payBeginningDate" formControlName="payBeginningDate" id="payBeginningDate" placeholder="Beginning Date">
<mat-datepicker-toggle matSuffix [for]="payBeginningDate"></mat-datepicker-toggle>
<mat-datepicker #payBeginningDate></mat-datepicker>
</mat-form-field>

【讨论】：

在您的 app.css 中导入 indigo-pink css 文件 @import "~@angular/material/prebuilt-themes/indigo-pink.css";
我的 styles.css 中已经有了这个... @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
@ClayHess 我刚刚更新了我的代码再试一次。您需要为输入添加标签
感谢您的更新，但我的代码中已经包含了这些内容。我只是没有将它们包含在我的代码 sn-p 中。

【解决方案2】：

mat-form-field 中输入上方的 mat-label 对我有用，但可能是因为我使用的是轮廓外观。

<mat-form-field appearance="outline">
  <mat-label>Beginning Date</mat-label>
  <input matInput [matDatepicker]="payBeginningDate" 
        formControlName="payBeginningDate" id="payBeginningDate" placeholder="Beginning Date">
  <mat-datepicker-toggle matSuffix [for]="payBeginningDate"></mat-datepicker-toggle>
  <mat-datepicker #payBeginningDate></mat-datepicker>
</mat-form-field>

【讨论】：