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
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:
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';
MatDatepickerModule
, MatNativeDateModule
under @NgModule in imports and exports ' array:@NgModule ({
imports: [
MatDatepickerModule,
MatNativeDateModule
],
exports: [
MatDatepickerModule,
MatNativeDateModule
]
})
Below import works for me my on my solution in Angular8
@NgModule ({
imports: [
MatDatepickerModule,
MatNativeDateModule,
]
});
You just need to import below module
import {MatDatepickerModule} from '@angular/material/datepicker'; @NgModule ({ imports: [ MatDatepickerModule ] })
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
]
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.