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.
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.
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 .
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
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.
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
],
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With