Can't bind to 'dateClass' since it isn't a known property of 'mat-datepicker' in angular7

Question

I am using angular material date picker in my app.I need to change color of some speccific dates.For this I am using 'dateClass' property of mat-datepicker.But it's not working.

html

    <mat-datepicker  [dateClass]="dateClass" #picker1 ></mat-datepicker>

component

dateClass = (d: Date) => {
    const date = d.getDate();

    // Highlight the 1st and 20th day of each month.
    return (date === 1 || date === 20) ? 'example-custom-date-class' : undefined;
  }

error

Can't bind to 'dateClass' since it isn't a known property of 'mat-datepicker'.
1. If 'mat-datepicker' is an Angular component and it has 'dateClass' input, then verify that it is part of this module.
2. If 'mat-datepicker' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

how can I solve this issue?

Did you import `MatDatepickerModule`? Also, you need Angular Material version 7.1.0 or later, `dateClass` was introduced in that version. — Fabian Küng, May 15 '19 at 05:26
how can i update angular material?my current version is 7.0.2 — Pranab V V, May 15 '19 at 09:11
Check [this](https://stackoverflow.com/a/47760057/4606040) post, `npm update --save @angular/material @angular/cdk`. — Fabian Küng, May 15 '19 at 10:57

score 3 · Accepted Answer · answered May 15 '19 at 11:00

For other people facing the same issue (repeating what is mentioned in the comments), make sure you have at least Angular Material version 7.1.0 or later installed. Additionally make sure you have imported MatDatepickerModule.

To update your Angular Material version use npm update --save @angular/material @angular/cdk.

Can't bind to 'dateClass' since it isn't a known property of 'mat-datepicker' in angular7

1 Answers1