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

You added the MaterialModule, but you have to add all the modules you use too. In this case, it's `MdInput` and `MdDatePicker`. — , Jun 16 '17 at 08:41

score 59 · Accepted Answer · edited Jul 07 '19 at 15:47

59

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.

edited Jul 07 '19 at 15:47

Gi1ber7

632
1
11
22

answered Jun 16 '17 at 08:24

Pengyy

37,383
15
83
73

2

I need to update my @angular/material module to the latest version for currently, my IDE doesn't find `MdDatePickerModule` when I import it. I guess, once it will be done, my problem will be solved – edkeveked Jun 16 '17 at 09:33
@edkeveked ok, maybe you will need to update all `@angular/xxx` packages as well based on the latest `@angular/material`(I have done this thing before). good luck. – Pengyy Jun 16 '17 at 09:34
This isn't working for me... Even though `MdDatepickerModule` is in the `app.module`, the error persists. – Nate Gardner Jul 28 '17 at 08:46
@NateGardner where are you using `mdDatePicker`? is this used at **submodule**? – Pengyy Jul 28 '17 at 09:04
@Pengyy, this worked really well for me, thanks. FYI, I didn't need MaterialModule. – Robert Bernstein Aug 04 '17 at 13:37
@RobertBernstein the `MaterialModule` will be deprecated in the future version, better to not use it any more. I have add some comments in my answer. – Pengyy Aug 05 '17 at 12:52
`MdDatePickerModule` has been renamed to `MatDatepickerModule` – crthompson Jan 25 '18 at 16:17
7

Also make sure you're adding `[matDatepicker]`, not `[matDatePicker]`. Don't ask me how I know this. – Brian Schantz Jun 01 '18 at 04:51
Thanks @pengyy, importing this optional module also helps with this [annoying no-error-logged mat-datepicker bug](https://stackoverflow.com/questions/52388827/mat-datepicker-makes-the-app-crash-without-logged-error/52389888). – Nino Filiu Sep 18 '18 at 15:41

Shailesh Ladumor · Answer 2 · 2017-09-23T04:04:06.917

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

score 7 · Answer 3 · edited Jan 01 '21 at 23:19

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

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

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

for angular 10.x import them independently

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

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

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

why to add in exports array ? @vaishali chaudhari is it when you have created a seperated module and you try to export all mat module from that shared module? — khizer, Jan 19 '22 at 18:55

score 3 · Answer 4 · edited Jan 13 '21 at 23:59

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
   ]
 })

score 2 · Answer 5 · answered Aug 26 '20 at 09:03

2

You just need to import below module

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

@NgModule ({
  imports: [
    MatDatepickerModule
   ]
  })

answered Aug 26 '20 at 09:03

Kapil Soni

1,003
2
15
37

score 1 · Answer 6 · answered May 26 '20 at 12:49

1

Below import works for me my on my solution in Angular8

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

answered May 26 '20 at 12:49

amol rajput

171
1
2
3

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

6 Answers6

Linked