CODEWITHSUNDEEP
angularangular-material
KellyCMI
KellyCMI

Reputation: 197

Angular material mat-calendar multiyear range view

Got a problem with a mat-calendar multiyear view. As default dropdown multiyear table shows 3 years back and 20 years forward from the current year (2016, 2017....2030).

Multiyear table

Instead, I want to see e.g. 23 years back counting from today (1996, 1999...2021).

How can I set the first view of the multiyear table as I described?

I have to use a mat-calendar.

Upvotes: 1

Views: 2667

Answers (1)

Codeptive Solutions
Codeptive Solutions

Reputation: 134

You can set startAt & startView in <mat-datepicker> as well as <mat-calendar> where startAt is a date object & startView is 'month' | 'year' | 'multi-year'. In your case startView would be 'multi-year'.

So at the end ts file would looks like

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

And html file would looks like

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

Upvotes: 1

Related Questions