Question

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

我试图更改startView，但这仅在开始选择日期选择器时才更改视图。

很遗憾，我发现没有功能允许我选择日期选择器的视图。

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 HERE。（L.214）

提前谢谢！

Answer 1

谢谢FabianKüng！

这是结果和代码：

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

  previousMultiYearClicked(mode: 'year') {
    this.calendar.activeDate = mode === 'year' ?
        this.dateAdapter.addCalendarYears(this.calendar.activeDate, -10) : null;
  }

  nextMultiYearClicked(mode: 'year') {
    this.calendar.activeDate = mode === 'year' ?
        this.dateAdapter.addCalendarYears(this.calendar.activeDate, 10) : null;
  }

StackBlitz HERE

Answer 2

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

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

有关有效的示例，请参见this stackblitz。

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

2 个答案: