角材料垫-日历多年范围视图

Question

使用日历日历的多年观点有问题。由于默认的下拉年份表显示了从当年（2016，2017 .... 2030）开始的3年和20年。

相反，我想看看从今天开始算起已有23年（1996，1999 ... 2021）。

如何根据我的描述设置多年期表的第一个视图？

我必须使用垫日历。

Answer 1

您可以在startAt和startView中设置<mat-datepicker>和<mat-calendar>，其中startAt是date object并且startView是'month' | '年'| '多年'。在您的情况下，startView为'multi-year'。

所以最终ts文件看起来像

import {Component} from '@angular/core';

@Component({
  selector: 'datepicker-start-view-example',
  templateUrl: 'datepicker-start-view-example.html',
  styleUrls: ['datepicker-start-view-example.css'],
})
export class DatepickerStartViewExample {
  startDate = new Date(1996, 0, 1);
}

HTML文件看起来像

<!-- Mat Datepicket -->
<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker startView="multi-year" [startAt]="startDate"></mat-datepicker>
</mat-form-field>

<!-- Mat Calender -->
<div class="container">
    <mat-card>
      <mat-calendar startView="multi-year" [startAt]="startDate"></mat-calendar>
    </mat-card>
</div>