angularangular-materialangular6angular-material-datetimepicker

Disable particular dates in Angular Material Date picker

I'm trying to us Angular 6 Material datepicker for one of my projects. I need to disable particular dates or give the user an option to choose particular dates(can be some random dates).

<mat-card>
    <input matInput [matDatepicker]="picker" placeholder="Choose a date">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #pickers></mat-datepicker>
    <app-date-picker></app-date-picker>
  </mat-card>
``
Solution

  • You have to use date validation:

    https://material.angular.io/components/datepicker/overview#date-validation

    So you can use min and max properties or matDatepickerFilter for more specified filters (probably better for your case). You can check two examples in the link above (first min and max, 2nd with matDatepickerFilter).