更改内联日期选择器角度材料的标题

Posted 2023-02-22

【中文标题】更改内联日期选择器角度材料的标题

【英文标题】：Change header of an inline datepicker angular material

【发布时间】：2022-01-23 21:25:42

【问题描述】：

要更改角度材料中日期选择器的标题，我们使用[calendarHeaderComponent] 例如

<mat-form-field>
  <mat-label>Date</mat-label>
  <input formControlName="date" matInput [matDatepicker]="picker" />
  <mat-datepicker-toggle matSuffix [for]="picker">
    <mat-icon matDatepickerToggleIcon svgIcon="calendar_day"></mat-icon>
  </mat-datepicker-toggle>
  <mat-datepicker color="primary" [calendarHeaderComponent]="datePickerHeader" #picker></mat-datepicker>
</mat-form-field>

为了让日期选择器内联，我们直接使用mat-calendar

  <mat-calendar [(selected)]="date"></mat-calendar>

挑战在于，如果我尝试在此组件上使用 calendarHeaderComponent 指令，则会引发此处不允许此属性的错误。我该如何解决这个问题？

【参考方案1】：

假设 customDatePickerHeader 是您的自定义标题组件。 尝试如下绑定：

<mat-calendar [headerComponent]="customDatePickerHeader" [(selected)]="date"></mat-calendar>

我已经参考了一个文档，但不确定是否很容易为内联 mat-calendar 组件找到一个文档。如果我设法找到它会编辑帖子。