Can't bind to 'matDatepicker' since it isn't a known property of 'input' - Angular
Solution 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.
Solution 2
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
Solution 3
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
]
})
Solution 4
You just need to import below module
import {MatDatepickerModule} from '@angular/material/datepicker';
@NgModule ({
imports: [
MatDatepickerModule
]
})
Solution 5
Below import works for me my on my solution in Angular8
@NgModule ({
imports: [
MatDatepickerModule,
MatNativeDateModule,
]
});
edkeveked
frontend: angular; backend: golang, python, rust, c++. Machine learning advocate with JavaScript. Love simple answers but effective ones. Life is an endless road, coding is an endless " 'loop' 'for' a 'while'"! Some of my best answers (in terms of contents not votes ) tensors ops rgb array to bgr array How to gather a tensor with unknown first (batch) dimension models color prediction calculate equation with non linear data theory best approach for multiple time series prediction in tensorflowjs how to define input tensor that has thousands of possible categorical values performance tensorflow.js in webworkers Misc: articles on medium linkedin
Updated on July 09, 2022Comments
-
edkeveked almost 2 years
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
-
edkeveked about 7 yearsI 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 -
Pengyy about 7 years@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. -
Nate Gardner almost 7 yearsThis isn't working for me... Even though
MdDatepickerModule
is in theapp.module
, the error persists. -
Pengyy almost 7 years@NateGardner where are you using
mdDatePicker
? is this used at submodule? -
Robert Bernstein almost 7 years@Pengyy, this worked really well for me, thanks. FYI, I didn't need MaterialModule.
-
Pengyy almost 7 years@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. -
crthompson over 6 years
MdDatePickerModule
has been renamed toMatDatepickerModule
-
Brian Schantz about 6 yearsAlso make sure you're adding
[matDatepicker]
, not[matDatePicker]
. Don't ask me how I know this. -
Nino Filiu almost 6 yearsThanks @pengyy, importing this optional module also helps with this annoying no-error-logged mat-datepicker bug.
-
khizer over 2 yearswhy 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?