Angular material: MatDatepicker: No provider found for DateAdapter
JavascriptAngularAngular MaterialJavascript Problem Overview
I'm trying to use the Datepicker component in Angular Material. Here is my HTML code:
<input matInput [matDatepicker]="picker" placeholder="Choose a date" disabled>
<mat-datepicker #picker disabled="false"></mat-datepicker>
However, it's not working for me and I'm getting the following error:
> Error: MatDatepicker: No provider found for DateAdapter.
The error message tells me that I need to import MatNativeDateModule as well as MatDatepickerModule but I have done that. Here is my import code below from app.module.ts:
import {
MatFormFieldModule,
MatMenuModule,
MatCheckboxModule,
MatIconModule,
MatDatepickerModule,
MatNativeDateModule
} from '@angular/material';
Is there anything else I'm missing?
Javascript Solutions
Solution 1 - Javascript
You need to import both MatDatepickerModule
and MatNativeDateModule
under imports and add MatDatepickerModule
under providers
imports: [
MatDatepickerModule,
MatNativeDateModule
],
providers: [
MatDatepickerModule,
],
Solution 2 - Javascript
Angular 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 - Javascript
Just import the
> MatNativeDateModule
along with the
> MatDatepickerModule
at the app.module.ts or app-routing.module.ts.
@NgModule({
imports: [
MatDatepickerModule,
MatNativeDateModule
]
})
Solution 4 - Javascript
Official docs: Error: MatDatepicker: No provider found for DateAdapter/MAT_DATE_FORMATS
> The datepicker was built to be date implementation agnostic. This means that it can be made to work with a variety of different date implementations. However it also means that developers need to make sure to provide the appropriate pieces for the datepicker to work with their chosen implementation. The easiest way to ensure this is just to import one of the pre-made modules: MatNativeDateModule, MatMomentDateModule.
Fix:
@NgModule({
imports: [MatDatepickerModule, MatNativeDateModule],
})
export class MyApp {}
Solution 5 - Javascript
In contrast on what has been said previously by some colleagues, you should NOT put MatDatepickerModule in prodivers array unless you have a good reason for it.
As a reminder (https://angular.io/guide/providers), and as it is well explained in the official documentation: A provider is an instruction to the Dependency Injection system on how to obtain a value for a dependency. Most of the time, these dependencies are services that you create and provide. In addition to this, providers are available to all the classes in the application which is not i guess, the purpose of MatDatepickerModule ! (since you should use it just in some few components)
So all what you need is to follow of course the examples well documented in the Angular official website (https://material.angular.io/components/datepicker/overview)
But before to check the solution, let's have a look at the self-explanatory error message:
ERROR Error: MatDatepicker: No provider found for DateAdapter. You must import one of the following modules at your application root: MatNativeDateModule, ....
It is not because the error talks initially about provider, that you just need to inject the staff in provider. Continue reading the full error...
Just one word about DateAdapter: DateAdapter is a class which adapts an object to be usable as a date by cdk-based components that work with dates. This DateAdapter needs to use some native functions from MatNativeDateModule
The suggested solution is:
In your app.module.ts import both MatDatepickerModule and MatNativeDateModule
...
import {MatDatepickerModule} from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
...
@NgModule({
imports: [MatDatepickerModule, MatNativeDateModule],
})
export class MyApp {}