Angular Material 2 - MatDatePicker Error - 'Must import MatNativeDateModule/MatMomentDateModule'

10
votes

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">
5
angulardatepickermomentjsangular-material2
You're supposed to import it along with the MatDateModule. Where are you importing your material date module ? – user4676340
MatDateModule doesn't exist... – nick.cook
MatPickerModule then ? Sorry I don't have all modules in mind, the one you use for the date picker. – user4676340
MatDatepickerModule and MatNativeDateModule/MatMomentDateModule are both included in the same import array in the app module – nick.cook
Could you please make a minimal reproducible example or provide your module code ? – user4676340

5 Answers

31
votes

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.

7
votes

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  
  ],
5
votes

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],

})
3
votes

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
-1
votes

Just import both below modules in app.module.ts

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

imports: [   
  MatDatepickerModule,
  MatNativeDateModule
]

That's it.