Angular 角材质材质材质日历多年范围视图

mat日历多年视图有问题。默认下拉式多年表显示了从当前年份（2016年、2017年……2030年）向后3年和向前20年的情况

相反，我希望看到从今天算起的23年（1996年、1999年……2021年）

如何设置我所描述的多年表的第一个视图

---

我必须使用垫子日历。

您可以在

中设置

startAt

和

startView

，以及

其中

startAt

是一个

日期对象

&startView是“月”、“年”、“多年”。在您的情况下，

startView

将是

“多年期”

所以在最后，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);
}

<!-- 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>

html文件看起来像

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

<!-- 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>

是的，这将是一个答案，但正如我提到的，我必须使用mat calendar，无mat datepicker:）您也可以将startView和startAt设置为。请参阅更新的代码和Answare。