angular - DatePicker 更改自定义标题中的 View

Question

我将 Angular Material 的 datePicker 与自定义 header 一起使用，并想在我的日期选择器 header 中添加一个按钮，以允许我转到日期选择器的“多年” View 。

我试图更改 startView，但这只会在我开始日期选择器选择时更改 View 。

不幸的是，我发现没有允许我选择日期选择器 View 的功能。

HTML:

<mat-form-field class="px-3">
  <input matInput [matDatepicker]="datePicker"
                  placeholder="Sélectionnez une période"
                  formControlName="selectedPeriod"
                  readonly
                  [min]="minDate" [max]="maxDate"
                  [matDatepickerFilter]="filterDate">
  <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
  <mat-datepicker #datePicker touchUi
                  startView="multi-year"
                  (yearSelected)="chosenYearHandler($event)"
                  (monthSelected)="chosenMonthHandler($event, datePicker)"
                  [calendarHeaderComponent]="exampleHeader">
  </mat-datepicker>
</mat-form-field>

日期选择器的标题:

<div class="example-header">
 <button mat-icon-button class="example-double-arrow" 
         (click)="previousClicked()">
   <mat-icon>arrow_back</mat-icon>
 </button>
 <span class="example-header-label">{{periodLabel}}</span>
 <button mat-icon-button class="example-double-arrow" 
         (click)="closeClicked()">
   <mat-icon>close</mat-icon>
 </button>

export class ExampleHeader<Moment> implements OnDestroy {

 private destroyed = new Subject<void>();
 @ViewChildren('datePicker') datePicker: MatDatepicker<Moment>;

 constructor(@Host() private calendar: MatCalendar<Moment>,
          private dateAdapter: DateAdapter<Moment>,
          private datepicker: MatDatepicker<Moment>,
          @Inject(MAT_DATE_FORMATS) private dateFormats: MatDateFormats,
          cdr: ChangeDetectorRef) {
              calendar.stateChanges
                  .pipe(takeUntil(this.destroyed))
                  .subscribe(() => cdr.markForCheck()); }

ngOnDestroy() {
  this.destroyed.next();
  this.destroyed.complete();
}

get periodLabel() {
  return this.dateAdapter
    .format(this.calendar.activeDate, this.dateFormats.display.monthYearA11yLabel)
    .toLocaleUpperCase();
}

//Back to the "multi-year" view of the datePicker
previousClicked() {
  this.datepicker.startView="multi-year"; //Does not match the demand
}

closeClicked() {
  this.datepicker.close();
}}

演示:

在演示中，我想要返回到之前的 View 。

我做了一个StackBlitz HERE对于我的日期选择器。 (L.214)

提前致谢!

Answer 1

您需要将其更改为以下内容:

previousClicked() {
  this.calendar.currentView = 'multi-year';
}

参见 this stackblitz 作为一个工作示例。