Resolved : Error: MatDatepicker: No provider found for DateAdapter

While using the Angular material Datepicker in the application, you may face an issue saying:

“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.”

Solution using Mat Native Date Adapter :

Make sure to import the MatNativeDateModule as already mentioned in the error message.

Open the app.module.ts file and update the AppModule as shown below:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatNativeDateModule } from '@angular/material/core';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatNativeDateModule, // <- Added MatNativeDateModule Here
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

 

Solution using Moment Date Adapter

If you want to use the MatMomentDateModule DateAdapter then you need to install the @angular/material-moment-adapter and moment library by executing the below command:

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

Otherwise, you will see an error saying: Cannot find module ‘@angular/material-moment-adapter‘ or its corresponding type declarations.

After installation is completed, update the AppModule as shown below:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatMomentDateModule } from '@angular/material-moment-adapter';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    BrowserAnimationsModule,
    MatDatepickerModule,
    MatFormFieldModule,
    MatMomentDateModule, // <- Added MatMomentDateModule
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

After adding any of the above adapter the issue will be resolved.