How to Disable Future Dates in a Mat Datepicker in Angular?

To disable future dates in a mat datepicker in Angular, you can use its max property. The max property disables all those dates which are higher than the date specified by the max property and restricts the user to select only those dates which are lower than the specified date.

So, to disable all future dates in the datepicker, we have to set the max date to today’s date. To do that, we have to first create a variable maxDate in our ts file, assign it to today’s date and then bind it with the max property of the datepicker.

This is how you can add the [max] property in your template file:

<mat-form-field class="example-full-width" appearance="fill">
  <mat-label>Choose a date</mat-label>
  <input matInput [max]="maxDate" [matDatepicker]="picker">
  <mat-hint>MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Now, open up your component’s ts file and set the maxDate value to today’s date:

export class CompOneComponent implements OnInit{

  maxDate:any;  // Declare the variable

  constructor() {
  }
  ngOnInit(): void {
    this.maxDate = new Date();
    // Set maxDate to todays' date
  }

}

Here is an image of the mat datepicker with all future dates disabled:

Thanks for reading.