Angular Material Datepicker：空日期的自定义字段文本答案

【问题标题】：Angular Material Datepicker: Custom field text for empty dateAngular Material Datepicker：空日期的自定义字段文本
【发布时间】：2020-10-22 09:51:06
【问题描述】：

我正在使用 Angular Material Datepicker。如果输入的值为空或 null，是否可以在字段中显示自定义文本？我在 Datepicker API 中没有找到解决方案。

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

感谢您的帮助。

【问题讨论】：

标签： angular datepicker angular-material

【解决方案1】：

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

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

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

如果您需要的不仅仅是文本字段，更进一步的做法是听取日期选择器的角度变化并动态添加/附加其他数据

【讨论】：

感谢您的回复，我将 placeholder 属性与标签和一些自定义 CSS 结合使用，以像常规输入条目一样设置占位符的样式。效果很好。
欢迎@chrisch。是的，需要进行一些修补，但很高兴知道它对您有用。我在自己的 angular/vue 项目中也有同样的做法：p