DatePicker更改自定义标题中的视图

Question

我正在使用带有自定义标题的Angular Material的datePicker，并想在datepicker标题中添加一个按钮，使我可以转到datepicker的“多年”视图。

我试图更改startView，但仅在启动datepicker选择时才更改视图。

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

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();
}}

演示：

与演示中一样，我想返回上一个视图。

我为datePicker做了一个StackBlitz这里。（L.214）

先感谢您！

Answer 1

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

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

有关工作示例，请参阅此stackblitz。

Answer 2

谢谢 Fabian K\xc3\xbcng！

\n\n

这是结果和代码：

\n\n

\n\n

  previousViewClicked() {\n    this.calendar.currentView = \'multi-year\';\n  }\n\n  previousMultiYearClicked(mode: \'year\') {\n    this.calendar.activeDate = mode === \'year\' ?\n        this.dateAdapter.addCalendarYears(this.calendar.activeDate, -10) : null;\n  }\n\n  nextMultiYearClicked(mode: \'year\') {\n    this.calendar.activeDate = mode === \'year\' ?\n        this.dateAdapter.addCalendarYears(this.calendar.activeDate, 10) : null;\n  }\n

\n\n

堆栈闪电战在这里

\n