How to disable specific dates using Angular Material Datepicker?

Question

I would like to disable weekends and specific dates in Angular Material Datepicker component.

How can I do that?

app.component.html:

<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

package.json:

"dependencies": {
    "@angular/animations": "^5.1.3",
    "@angular/cdk": "^5.0.3",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/material": "^5.0.3",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.2",
    "zone.js": "^0.8.14"
  },

take a look here: docs, you need the matDatepickerFilter

Dmytro Grynets
– Dmytro Grynets

2018-01-09 14:04:58 +00:00
Commented Jan 9, 2018 at 14:04 — Dmytro Grynets
– Dmytro Grynets, Commented Jan 9, 2018 at 14:04

Dmytro Grynets · Accepted Answer · 2018-01-09 14:17:10Z

17

You need the matDatepickerFilter, use it like so:

 <mat-form-field>
     <input matInput
        [matDatepicker]="picker"
        [matDatepickerFilter]="dateFilter"
        placeholder="Choose a date">
     <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
     <mat-datepicker #picker></mat-datepicker>
 </mat-form-field>

and in your component eg someComponent.ts:

@Component({...})
export class SomeComponent.ts {
...
    dateFilter = (date: Date) => date.getMonth() % 2 == 1 && date.getDate() % 2 == 0;
...
}

... stands for some other stuff, filtering is just an example of filtering odd month, you can use any, general it must be function that returns boolean and accepts date

reference example project

reference docs

answered Jan 9, 2018 at 14:17

Dmytro Grynets

95311 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to disable specific dates using Angular Material Datepicker?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related