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

To disable previous dates in a mat datepicker in Angular, you can use the min property of the datepicker. The min property disables all those dates which are lower than the date specified by the min property. And allows only those which are greater than or equal to the specified date.

So, if you want to disable all previous dates, you have to set the min property to today’s date so that all dates lower than today’s date become disabled.

To do that, you have to first create a variable minDate in your ts file and assign it to today’s date. After that, you have to bind it to the min property of the datepicker. That’s all.

This is how you can add the [min] property to the datepicker and bind it to the minDate variable:

<mat-form-field class="example-full-width" appearance="fill">
  <mat-label>Choose a date</mat-label>
  <input matInput [min]="minDate" [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>

Next, in your ts file, you have to declare the minDate variable and set it to today’s date:

export class CompOneComponent implements OnInit{

  minDate:any;

  constructor() {
  }
  ngOnInit(): void {

    this.minDate = new Date();
    // Set minDate to todays' date
  }
}

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

Thanks for reading.