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