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

Posted 2023-03-13

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

【英文标题】：DatePicker change the view in the custom header

【发布时间】：2019-05-25 07:11:21

【问题描述】：

我正在使用带有自定义标题的 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 HERE。 (L.214)

提前谢谢你！

【参考方案1】：

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

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

请参阅 thisstackblitz 了解工作示例。

【讨论】：

链接好像失效了

查看昆汀在下面发布的代码+ Stackblitz，他的 Stackblitz 仍然有效。

【参考方案2】：

感谢 F*** Kü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