Winkelmaterial: MatDatepicker: Für DateAdapter wurde kein Anbieter gefunden

73

Ich versuche, die Datepicker-Komponente in Angular Material zu verwenden. Hier ist mein HTML-Code:

<input matInput [matDatepicker]="picker" placeholder="Choose a date" disabled>
<mat-datepicker #picker disabled="false"></mat-datepicker>

Es funktioniert jedoch nicht bei mir und ich erhalte die folgende Fehlermeldung:

Fehler: MatDatepicker: Für DateAdapter wurde kein Anbieter gefunden.

Die Fehlermeldung sagt mir, dass ich MatNativeDateModule sowie MatDatepickerModule importieren muss, aber ich habe das getan. Hier ist mein Importcode von app.module.ts:

import {
    MatFormFieldModule,
    MatMenuModule,
    MatCheckboxModule,
    MatIconModule,
    MatDatepickerModule,
    MatNativeDateModule
} from '@angular/material';

Fehlt mir noch etwas?

Ajgisme
quelle

Antworten:

135

Sie müssen beide MatDatepickerModule und MatNativeDateModuleunter Importe importieren und MatDatepickerModuleunter Anbietern hinzufügen

 imports: [
    MatDatepickerModule,
    MatNativeDateModule 
  ],
  providers: [  
    MatDatepickerModule,  
  ],
Sajeetharan
quelle
1
Das Md-Präfix ist veraltet. Bitte geben Sie Lösungen mit Mat-Syntax an.
Tomasz Kula
3
In meinem Fall musste ich sie auch mit dem Import {MatDatepickerModule} von '@ angle / material / datepicker' aus der API importieren. {MatNativeDateModule} aus '@ angle / material /' importieren;
Max Wiederholt
das funktioniert danke! aber was ist, wenn wir separate Dateien zum Importieren von Material verwenden? können wir dort Anbieter einstellen? Ich bin neu in diesem Bereich!
Sujeewa K. Abeysinghe
Vielen Dank, ich füge gerade MatNativeDateModule Import aus dem Kern hinzu und das funktioniert
Kindth
48

Angullar 8,9

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

Winkel 7 und darunter

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

Sie müssen sowohl MatDatepickerModule als auch MatNativeDateModule unter Importen importieren und MatDatepickerModule unter Providern hinzufügen

imports: [
    MatDatepickerModule,
    MatNativeDateModule 
  ],
  providers: [  
    MatDatepickerModule,
    MatNativeDateModule  
  ],
Lilan Silva
quelle
Vielen Dank, dass dies für Angular 9 geholfen hat. Übrigens {MatDatepickerModule, MatNativeDateModule} aus '@ angle / material' importieren; arbeitet für 8
glant
Warum müssen Sie sie dem Anbieter-Array hinzufügen?
NicuVlad
Wenn nicht, müssen Sie jede Komponente weise injizieren
Lilan Silva
15

Importieren Sie einfach die

MatNativeDateModule

zusammen mit

MatDatepickerModule

unter app.module.ts oder app-routing.module.ts.

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

Offizielle Dokumente: Fehler: MatDatepicker: Für DateAdapter / MAT_DATE_FORMATS wurde kein Anbieter gefunden

Der Datepicker wurde so erstellt, dass er unabhängig von der Datumsimplementierung ist. Dies bedeutet, dass mit einer Vielzahl unterschiedlicher Datumsimplementierungen gearbeitet werden kann. Dies bedeutet jedoch auch, dass Entwickler sicherstellen müssen, dass die entsprechenden Teile für den Datepicker bereitgestellt werden, damit sie mit der von ihnen gewählten Implementierung arbeiten können. Der einfachste Weg, dies sicherzustellen, besteht darin, eines der vorgefertigten Module zu importieren: MatNativeDateModule, MatMomentDateModule.

Fix:

@NgModule({
  imports: [MatDatepickerModule, MatNativeDateModule],
})
export class MyApp {}
Tomasz Kula
quelle
Laut den Dokumenten: We highly recommend using the MomentDateAdapter or a custom DateAdapter that works with the formatting/parsing library of your choice.SeitMatNativeDateModule 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