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

Question

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">

Solution 1

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.

Solution 2

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

Solution 3

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

})

Solution 4

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

View more solutions