Matdatepicker: No Provider Found For Dateadapter. You Must Import One Of The Following Modules At Your Application Root: Matnativedatemodule

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 materia

Solution 1:

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

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

...

MatNativeDateModule 
],

Solution 2:

I've solved it by adding follow modules:

import {MatNativeDateModule} from'@angular/material';
import { MatMomentDateModule } from"@angular/material-moment-adapter";

and in your imports

imports: [
    ...
    MatDatepickerModule,
    MatButtonModule,
    MatFormFieldModule,
    MatNativeDateModule, MatMomentDateModule,
  ],

I'm not that deep in material-angular I've only follow the error message advice

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.

Attention: For newer Angular versions you only need to import one module:

import { MatNativeDateModule } from'@angular/material/core';

...
    imports: [
        ...
        MatDatepickerModule,
        MatButtonModule,
        MatFormFieldModule,
        MatNativeDateModule,
      ],

instead:

import {MatNativeDateModule} from'@angular/material';
import { MatMomentDateModule } from"@angular/material-moment-adapter";
...
imports: [
    ...
    MatDatepickerModule,
    MatButtonModule,
    MatFormFieldModule,
    MatNativeDateModule, MatMomentDateModule,
  ],

Solution 3:

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

import {MatDatepickerModule} from'@angular/material/datepicker';
import {MatNativeDateModule} from'@angular/material/core';
import {MatInputModule} from'@angular/material/input';

imports: [
MatDatepickerModule
,MatNativeDateModule,MatInputModule
]

HTML :
You need to wrap element withTag
<form>
<mat-form-field><mat-label>Choose a date</mat-label><inputmatInput [matDatepicker]="picker"><mat-datepicker-togglematSuffix [for]="picker"></mat-datepicker-toggle><mat-datepicker #picker></mat-datepicker></mat-form-field>

Solution 4:

I just used the first import referred:

import {MatNativeDateModule} from'@angular/material';

the other import got me to another error I didn't solved, but it wasn't necessary.

Don't forget to add MatNativeDateModule to the imports array in app.module.ts.

Solution 5:

The imports have changed. Use this instead:

import {MatNativeDateModule} from'@angular/material/core';