MatNativeDateModule, MatMomentDateModule not found in angular 9.1.1

user_1976429 0
Viewed 28983

Old angular/material has those two modules. but angular/material 9.1.1 version has not those two module. I got below error. Anyone has any idea how to import those two module 

Uncaught (in promise): 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.
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.
angular-material
2 Answers

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

In case you're looking for the MatMomentDateModule, it does not come by default, you will need to install @angular/material-moment-adapter separately

npm install --save @angular/material-moment-adapter

In case you face the issue that the peer dependency Moment.js is missing, install it with

npm install --save-dev moment

Then go ahead and import the MatMomentDateModule in the module file

import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatMomentDateModule, MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';

@NgModule({
    declarations: [
        ...
    ],
    imports: [
        ...
        MatDatepickerModule,
        MatMomentDateModule

    ],
    providers: [
        {provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: {useUtc: true}}
    ]
})
export class MyModule {}

Read more at Angular Material Datepicker component

user_56689560
Related