I'm trying to momentjs to format dates in my component controllers where matInput datepicker components are used, but I'm getting the following error in the console when I try to load pages where these are present:
Error: MatDatepicker: No provider found for DateAdapter. You must import one of the following modules at your application root: MatNativeDateModule, MatMomentDateModule, or provide a custom implementation.
Problem is that I've tried including this in my app module, main app component and child components where I'm trying to reference the moment()
method, but I still get the error. I've also tried using MatNativeDateModule with the same result.
This is the module dependency that I'm importing:
import { MatMomentDateModule } from '@angular/material-moment-adapter';
Datepicker element:
<input matInput [matDatepicker]="invoiceDate" [max]="maxDate" name="date" placeholder="DD/MM/YYYY" formControlName="date">
Have you added it to your module's imports?
import { MatMomentDateModule } from "@angular/material-moment-adapter";
@NgModule({
/* etc. */
imports: [ BrowserModule, /* etc. */, MatMomentDateModule, /* etc. */ ],
/* etc. */
}
I've installed it with
npm i @angular/material-moment-adapter --save
and everything works.
Angullar 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
],
I had a similar error with MatDatepickerModule and MatNativeDateModule which said
ERROR Error: "MatDatepicker: No provider found for DateAdapter. You must import one of the following modules at your application root: MatNativeDateModule, MatMomentDateModule, or provide a custom implementation."
I solved the issue by doing
import { MatDatepickerModule, MatNativeDateModule } from '@angular/material';
@NgModule({
imports:[ MatDatepickerModule,
MatNativeDateModule],
providers: [MatNativeDateModule, MatDatepickerModule],
})
Add
import { MatMomentDateModule } from "@angular/material-moment-adapter";
and install
npm i @angular/material-moment-adapter --save
and the dependency also
npm i moment --save
Just import both below modules in app.module.ts
import { MatDatepickerModule, MatNativeDateModule} from '@angular/material';
imports: [
MatDatepickerModule,
MatNativeDateModule
]
That's it.
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.