I'm trying to use the Datepicker component in Angular Material. Here is my HTML code:
<input matInput [matDatepicker]="picker" placeholder="Choose a date" disabled>
<mat-datepicker #picker disabled="false"></mat-datepicker>
However, it's not working for me and I'm getting the following error:
Error: MatDatepicker: No provider found for DateAdapter.
The error message tells me that I need to import MatNativeDateModule as well as MatDatepickerModule but I have done that. Here is my import code below from app.module.ts:
import {
MatFormFieldModule,
MatMenuModule,
MatCheckboxModule,
MatIconModule,
MatDatepickerModule,
MatNativeDateModule
} from '@angular/material';
Is there anything else I'm missing?
You need to import both MatDatepickerModule and MatNativeDateModule under imports and add MatDatepickerModule under providers
imports: [
MatDatepickerModule,
MatNativeDateModule
],
providers: [
MatDatepickerModule,
],
Angular 8, 9
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
Angular 7 and below
import { MatDatepickerModule, MatNativeDateModule } from '@angular/material';
You need to import both MatDatepickerModule and MatNativeDateModule under imports and add MatDatepickerModule under providers
imports: [
MatDatepickerModule,
MatNativeDateModule
],
providers: [
MatDatepickerModule,
MatNativeDateModule
],
Just import the
MatNativeDateModule
along with the
MatDatepickerModule
at the app.module.ts or app-routing.module.ts.
@NgModule({
imports: [
MatDatepickerModule,
MatNativeDateModule
]
})