Question

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

我尝试过更改css以使其正常工作，甚至尝试使用mat标签不成功。

<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>

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

Answer 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>

Answer 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>

填充角材料Datepicker时如何显示占位符？

2 个答案: