Angular material: MatDatepicker: No provider found for DateAdapter

Question

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?

Answer 1

You need to import both MatDatepickerModule and MatNativeDateModule under imports and add MatDatepickerModule under providers

 imports: [
    MatDatepickerModule,
    MatNativeDateModule 
  ],
  providers: [  
    MatDatepickerModule,  
  ],

Answer 2

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

Answer 3

Just import the

MatNativeDateModule

along with the

MatDatepickerModule

at the app.module.ts or app-routing.module.ts.

@NgModule({
imports: [
    MatDatepickerModule,
    MatNativeDateModule 
]
})

Answer 4

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 {}