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

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. (" [mdDatepickerToggle]="picker"> [ERROR > ->]

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

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.

you need to import FormsModule and ReactiveFormsModule if you used NgModule and formgroup. so your app.module should be like that

import {MaterialModule} from '@angular/material';
@NgModule({
  imports: [
    MdDatepickerModule,        
    MdNativeDateModule,
    FormsModule,
    ReactiveFormsModule
  ]

Note: MaterialModule Removed. please use separate module instead. like MdDatepickerModule see here https://github.com/angular/material2/blob/master/CHANGELOG.md#200-beta11-carapace-parapet-2017-09-21

To use MatDatePicker in application add the following lines in your app.module.ts (or the current module your component/page belongs to) file:

1. import MatDatepickerModule, MatNativeDateModule in your app.module.ts.

import { MatDatepickerModule, MatNativeDateModule } from '@angular/material';

> for angular 10.x import them independently > ts > import { MatDatepickerModule } from '@angular/material/datepicker'; > import { MatNativeDateModule } from '@angular/material/core'; >

2. Add MatDatepickerModule, MatNativeDateModule under @NgModule in imports and exports' array:

@NgModule ({
           imports: [
               MatDatepickerModule,
               MatNativeDateModule 
           ],
           exports: [
               MatDatepickerModule, 
               MatNativeDateModule 
           ]
       })

You just need to import below module

import {MatDatepickerModule} from '@angular/material/datepicker';

@NgModule ({
  imports: [
    MatDatepickerModule
   ]
  })

Below import works for me my on my solution in Angular8

@NgModule ({
        imports: [
            MatDatepickerModule,
            MatNativeDateModule,
        ]
 });

In the latest versions of Angular Material, you have to import MatDatepickerModule from @angular/material/datepicker in this case and MatNativeDateModule from @angular/material/core.

import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';

 @NgModule ({
   imports: [
    MatDatepickerModule,
    MatNativeDateModule
   ]
 })