Can't bind to 'matDatepicker' since it isn't a known property of 'input' - Angular

Question

I have just copied and pasted angular material code for datePicker and input, but I am getting this error for the datePicker.

app.module

import {MaterialModule} from '@angular/material'; @NgModule({ imports: [ ... MaterialModule ] 

<md-input-container>     <input mdInput placeholder="Rechercher" [(ngModel)]="filterHistorique"> </md-input-container>  <md-input-container>     <input mdInput [mdDatepicker]="picker" placeholder="Choose a date">     <button mdSuffix [mdDatepickerToggle]="picker"></button> </md-input-container> <md-datepicker #picker></md-datepicker> 

This is the error I am having in my browser:

Can't bind to 'mdDatepicker' since it isn't a known property of 'input' If 'md-datepicker' is an Angular component, then verify that it is part of this module. 2. If 'md-datepicker' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" [ERROR ->]

The error is for the datepicker, when I removed it, the errors disappears

Answer 1

While using mat-datepicker, you have to import MatDatepickerModule as well, also MatNativeDateModule is recommended to be imported too. see docs here.

import { MaterialModule, MatDatepickerModule, MatNativeDateModule } from '@angular/material'; @NgModule({   imports: [     ...     MaterialModule,            // <----- this module will be deprecated in the future version.     MatDatepickerModule,        // <----- import(must)     MatNativeDateModule,        // <----- import for date formating(optional)     MatMomentDateModule         // <----- import for date formating adapted to more locales(optional)   ] 

For optional module of date formating, see Module for DateAdapter from material team.

Mention: please avoid using MaterialModule for it'll be deprecated in the future.