How to add maxdate and mindate to mat-calendar in Angular 6

Question

I am using Angular 6 material design mat-calendar. I am referring the below example. https://stackblitz.com/edit/angular-mat-calendar?file=src%2Fapp%2Fapp.component.html

But in mat-calendar how to set min and max proporty.

 <mat-calendar [selected]="selectedDate" (selectedChange)="onSelect($event)"></mat-calendar>

I am trying to add like this, but it is not working.

<mat-calendar [selected]="selectedDate" (selectedChange)="onSelect($event)" [min]="mindate" [max]="maxdate"></mat-calendar>

But this is throwing error "Can't bind to 'min' since it isn't a known property of 'mat-calendar'."

Anyone can help me in this.

Answer 1

You need to use [minDate] not [min] similarly [maxDate]

In Html:

  <mat-calendar [selected]="selectedDate" 
       (selectedChange)="onSelect($event)" 
       [minDate]="minDate" [maxDate]="maxDate"></mat-calendar>

In component:

  minDate = new Date(2018, 0, 1);
  maxDate = new Date(2020, 2, 1);

https://stackblitz.com/edit/angular-mat-calendar-pauykr?file=src%2Fapp%2Fapp.component.html

Answer 2

you can try like this

**TS**

minDate = new Date(2017, 0, 1);

**HTML**

<mat-calendar [selected]="selectedDate" (selectedChange)="onSelect($event)" [minDate] = "minDate"></mat-calendar>

I hope it helps you out