Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

MatNativeDateModule, MatMomentDateModule not found in angular 9.1.1

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.
like image 636
lilan silva Avatar asked Mar 05 '20 15:03

lilan silva


People also ask

What is matmomentdatemodule in angular?

The moment.js is free and open source JavaScript library. Angular MatMomentDateModule internally imports Moment from moment.js and we need to install it in our application.

What is the difference between matmomentdatemodule and matnativedatemodule?

The MatMomentDateModule has advantage over MatNativeDateModule. This is because MatNativeDateModule uses native JavaScript Date and it cannot set parse format. The MomentDateAdapter or a custom DateAdapter can set parse format. Here on this page we will provide a complete example to create Datepicker using moment.js .

How to import matdatepicker module in angular?

import { MatMomentDateModule } from "@angular/material-moment-adapter"; @NgModule ( { /* etc. */ imports: [ BrowserModule, /* etc. */, MatMomentDateModule, /* etc. */ ], /* etc. */ } and everything works. You need to import both MatDatepickerModule and MatNativeDateModule under imports and add MatDatepickerModule under providers

How to install angular material in angular CLI?

Install Angular Material using link . 3. Download source code using download link given below on this page. 4. Use downloaded src in your Angular CLI application. 5. Run ng serve using command prompt.


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  
  ],
like image 96
lilan silva Avatar answered Oct 23 '22 15:10

lilan silva


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

like image 43
ThangLeQuoc Avatar answered Oct 23 '22 14:10

ThangLeQuoc