更改 header 内联日期选择器 angular material

Question

要更改 angular material 中日期选择器的 header，我们使用 [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 指令，它会抛出错误，指出此处不允许使用此属性。我该如何解决这个问题？

Answer 1

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

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

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

更改 header 内联日期选择器 angular material

Change header of an inline datepicker angular material

javascript

datepicker

angular-material2

angular