MatDatepicker: No provider found for DateAdapter. You must import one of the following modules at your application root: MatNativeDateModule

Question

I have imported the matdatepicker in my app.module.ts file but still it shows some error. I can't get the material component working. the button works fine and uses angular material component. But when I use datepicker it doesn't work.

app.module.ts file

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import{ HttpClientModule} from '@angular/common/http'; import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import {MatTableModule} from '@angular/material/table'; import {MatDatepickerModule} from '@angular/material/datepicker'; import {MatButtonModule} from '@angular/material/button'; import {MatFormFieldModule} from '@angular/material/form-field';   import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { InactiveusersComponent } from './component/inactiveusers/inactiveusers.component'; import { CalendarComponent } from './component/calendar/calendar.component'; import { InactiveItemComponent } from './component/inactive-item/inactive-item.component'; import { NewtableComponent } from './component/newtable/newtable.component';  @NgModule({   declarations: [     AppComponent,     InactiveusersComponent,     CalendarComponent,     InactiveItemComponent,     NewtableComponent   ],   imports: [     BrowserModule,     AppRoutingModule,     HttpClientModule,     BrowserAnimationsModule,     MatTableModule,     MatDatepickerModule,     MatButtonModule,     MatFormFieldModule   ],   exports:[     MatDatepickerModule,     MatButtonModule   ],   providers: [MatFormFieldModule,MatDatepickerModule],   bootstrap: [AppComponent] }) export class AppModule { } 

calendar.component.html

<input #startDate  type="date" name="startdate"> <input #endDate type="date"name="enddate">  <button (click)="sendRange(startDate.value,endDate.value)" mat-button color="primary">Submit</button>  <mat-form-field>     <input matInput [matDatepicker]="picker" placeholder="Choose a date">     <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>     <mat-datepicker #picker></mat-datepicker>   </mat-form-field>  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.js:37)     at new MatDatepickerInput (datepicker.js:2344)     at createClass (core.js:24577)     at createDirectiveInstance (core.js:24386)     at createViewNodes (core.js:34994)     at callViewAction (core.js:35444)     at execComponentViewsAction (core.js:35349)     at createViewNodes (core.js:35023)     at callViewAction (core.js:35444)     at execComponentViewsAction (core.js:35349) 

Answer 1

I got, Here working fine Just import the modules in APP.MODULE.TS file

import {MatNativeDateModule} from '@angular/material/core'; imports: [  ...  MatNativeDateModule  ],