Angular Material 日期选择器：空日期的自定义字段文本

Question

我正在使用 Angular Material 日期选择器。如果输入的值为空或 null，是否可以在字段中显示自定义文本？我没有在 Datepicker API.

中找到解决方案

在我的用例中，用户可以为文章设置可选的发布日期。如果用户没有设置特定的发布日期（日期为空），我想在输入字段中显示文本，如“无发布限制”或“立即发布”或类似内容。

感谢您的帮助。

Answer 1

假设您也在使用 Material 输入，您可以非常轻松地管理日期输入的标签。

<mat-form-field appearance="fill">
  <mat-label>YOUR LABEL or {{yourLabel}}</mat-label>
  <input matInput [matDatepicker]="picker">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

即使没有 material 输入，您也可以管理输入的占位符以在输入为空时显示文本。

更进一步是监听 angular 中的日期选择器变化，如果您需要的不仅仅是文本字段，还可以动态监听 add/append 其他数据

Angular Material 日期选择器：空日期的自定义字段文本

Angular Material Datepicker: Custom field text for empty date

datepicker

angular-material

angular