Угловой материал мат-календарь с многолетним обзором

Question

Возникла проблема с многолетним просмотром мат-календаря. По умолчанию в раскрывающейся многолетней таблице показаны 3 года назад и 20 лет вперед от текущего года (2016, 2017 .... 2030).

Вместо этого я хочу видеть, например, 23 года назад, считая с сегодняшнего дня (1996, 1999 ... 2021).

Как я могу установить первый вид многолетней таблицы, как я описал?

Мне нужно использовать мат-календарь.

Answer 1

Вы можете установить startAt & startView в <mat-datepicker>, а также <mat-calendar>, где startAt - date object, а startView - «месяц» |'год' |«Многолетние». В вашем случае 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>