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?

Sajeetharan · Accepted Answer · 2018-04-08T17:58:05.753

197

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

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

edited Apr 08 '18 at 17:58

answered Apr 08 '18 at 17:54

Sajeetharan

216,225
63
350
396

1

The Md prefix is deprecated. Please provide solutions using Mat syntax. – Tomasz Kula Apr 08 '18 at 17:55
3

In my case, I also needed to import them from the API with import {MatDatepickerModule} from '@angular/material/datepicker'; import {MatNativeDateModule} from '@angular/material/'; – Max Wiederholt Mar 20 '19 at 21:27
this works thank you! but what if we using separate file to import material? can we set providers there? I'm new to this! – Sujeewa K. Abeysinghe May 07 '20 at 15:51
1

Thank you I just add MatNativeDateModule import from core and thats works – Kindth Sep 09 '20 at 22:32
3

I don't think Modules belong in the providers array. Just adding to imports should be sufficient – cBlaine Jun 17 '21 at 13:46
No sir, this is not working – Youssef Jan 18 '22 at 15:06

score 80 · Answer 2 · edited Nov 09 '21 at 10:39

80

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

edited Nov 09 '21 at 10:39

ThangLeQuoc

2,272
2
19
30

answered Mar 05 '20 at 17:51

lilan silva

1,896
1
14
19

Thanks this helped for Angular 9. BTW import { MatDatepickerModule, MatNativeDateModule } from '@angular/material'; works for 8 – glant Apr 09 '20 at 18:25
1

Why you need to add them to the providers array? – NicuVlad Nov 11 '20 at 11:59
if not you have to inject each component wise – lilan silva Dec 12 '20 at 15:47
@lilansilva can you elaborate? My test works without adding to the providers but maybe i'm doing something out of habit that I don't need to be doing – cBlaine Jun 17 '21 at 13:48

score 19 · Answer 3 · answered Oct 19 '18 at 11:24

19

Just import the

MatNativeDateModule

along with the

MatDatepickerModule

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

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

answered Oct 19 '18 at 11:24

Sushil

2,324
1
27
26

Tomasz Kula · Answer 4 · 2018-04-08T17:54:52.133

8

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

edited Apr 08 '18 at 17:54

answered Apr 08 '18 at 17:54

Tomasz Kula

16,199
2
68
79

1

According to the docs: `We highly recommend using the MomentDateAdapter or a custom DateAdapter that works with the formatting/parsing library of your choice.` Since `MatNativeDateModule is based off of the functionality available in JavaScript's native Date object, and is thus not suitable for many locales. One of the biggest shortcomings of the native Date object is the inability to set the parse format.` – hogan Aug 19 '19 at 11:26

score 3 · Answer 5 · answered Jan 18 '22 at 15:08

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

score 1 · Answer 6 · answered Sep 20 '22 at 09:26

When using the MatNativeDateModule together with MatDatepicker or MatCalendar inside your "sub module" (when you create your own module inside main app) you might need to import the MatNativeDateModule inside your main app module. Without this I was still getting

core.js?4dd3:1673 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.
    at createMissingDateImplError (datepicker.es5.js?d462:38:1)
    at new MatCalendar (datepicker.es5.js?d462:1563:1)

Please not what the message is saying "at your application root".

My "submodule" delaration was looking like this:

@NgModule({
    imports: [
        (...)
        MatDatepickerModule
    ],
    providers: [MatDatepickerModule],
})
export class MySubModule

Adding MatNativeDateModule to above submodule delaration was not helping. I was getting another error:

core.js?4dd3:1673 ERROR Error: Uncaught (in promise): Error: Unexpected value 'undefined' imported by the module 'DexGridCalendarCellEditorModule'
Error: Unexpected value 'undefined' imported by the module 'DexGridCalendarCellEditorModule'
    at syntaxError (compiler.js?db2b:1021:1)
    at eval (compiler.js?db2b:10589:1)
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.getNgModuleMetadata (compiler.js?db2b:10558:1)

Finally when I added the import to main app module it started working correctly:

// NOTE: see the import below 
import { MatNativeDateModule } from "@angular/material/";

@NgModule({
    imports: [
        MatNativeDateModule
    ],
})
export class AppModule {

I can confirm I had the same issue and came up with same solution. As a small clarification: you don't need to add MatDatepickerModule into providers array. Providing to imports is enough and also providing either MatNativeDateModule or MatMomentDateModule to AppModule is mandatory. — Victor Muresanu, Oct 20 '22 at 08:25

Angular material: MatDatepicker: No provider found for DateAdapter

6 Answers6

Linked