3

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>
``
Tushar
  • 1,948
  • 1
  • 13
  • 32
Shashank
  • 437
  • 2
  • 6
  • 21

3 Answers3

5

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

Patryk Łucka
  • 1,023
  • 8
  • 15
  • Adding a working demo with matDatepickerFilter. thanks for this, i didn't notice it in material documentation – JEWEL JACOB May 22 '20 at 13:11
  • Isn't it possible to combine both ? (min max and matDatepickerFilter) so for example you prevent user for navigating from 1 month/year to another. – Pedro Bezanilla Oct 05 '22 at 09:51
4

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

JEWEL JACOB
  • 544
  • 6
  • 8
3

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.

Manit
  • 1,087
  • 11
  • 17