Angular material: MatDatepicker: No provider found for DateAdapter

javascript angular angular-material
ajgisme picture ajgisme · Apr 8, 2018 · Viewed 73.2k times · Source

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

Sajeetharan picture Sajeetharan · Apr 8, 2018

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

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

Related questions

Angular change MatInput Size

I am new to Angular 4 and started working with the material components, I copied a couple of example from the official documentation but didn't get the same result as the documentation : How do I get change the textbox width ? I …

Read More
Angular Material Table filterPredicate

I'm trying to filter a set of data by a specific object key Ex: I have a set of skills, I want to see all of the skills at level 2. I have read through the docs, this github example, and …

Read More
Set width on input mat-form-fields for angular material

I am so very new to Angular, and I am trying to create a form with longer-than-default input fields. This is my current code: person.component.html <form class="new-person-form"> <mat-card> <mat-form-field> <input …

Read More