CODEWITHSUNDEEP
angulardatepickermomentjsangular-material2
nick.cook
nick.cook

Reputation: 2141

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

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

Upvotes: 13

Views: 36276

Answers (5)

Hamada
Hamada

Reputation: 1898

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

Upvotes: 5

Monu Chaudhary
Monu Chaudhary

Reputation: 370

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

})

Upvotes: 6

lilan silva
lilan silva

Reputation: 2014

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

Upvotes: 11

Santhosh Raj Mudulakar
Santhosh Raj Mudulakar

Reputation: 63

Just import both below modules in app.module.ts

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

imports: [   
  MatDatepickerModule,
  MatNativeDateModule
]

That's it.

Upvotes: 0

Alessio Stalla
Alessio Stalla

Reputation: 1062

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.

Upvotes: 34

Related Questions