CODEWITHSUNDEEP
angularangular-materialangular6angular-material-datetimepicker
Shashank
Shashank

Reputation: 447

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

Upvotes: 3

Views: 17854

Answers (3)

JEWEL JACOB
JEWEL JACOB

Reputation: 584

You can use matDatepickerFilter if required to filter out particular dates. A simple example will be

dateFilter = (d: Date) => { return [1, 5, 10, 21].indexOf(+d.getDate()) == -1; };

and in template

<input matInput [matDatepicker]="picker" [matDatepickerFilter]=dateFilter>

Working demo in stackblitz : demo

Upvotes: 4

Manit
Manit

Reputation: 1105

Probably one of the ways of doing it would be fixing your minimum and maximum dates. So, in your component you set your min and max dates like:

 minDate = new Date(2019, 0, 1); //minDate is 1st Jan 2019
 maxDate = new Date(2020, 0, 1); //maxDate is 1st Jan 2020

Now in your template:

 <mat-form-field class="example-full-width">
   <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker" 
     placeholder="Choose a date">
   <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>
 </mat-form-field>

This will allow the user to select any date between 1st Jan 2019 to 1st Jan 2020 including both the dates. Hopefully that helps.

Upvotes: 3

Patryk Łucka
Patryk Łucka

Reputation: 1043

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).

Upvotes: 5

Related Questions