Winkelmaterial: MatDatepicker: Kein Anbieter für DateAdapter gefunden

Lesezeit: 4 Minuten

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>

Allerdings funktioniert es bei mir nicht und ich erhalte folgende Fehlermeldung:

Fehler: MatDatepicker: Kein Anbieter für DateAdapter gefunden.

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

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

Gibt es noch etwas, was ich vermisse?

Benutzer-Avatar
Sajeetharan

Sie müssen beide importieren MatDatepickerModule und MatNativeDateModule unter Importe und hinzufügen MatDatepickerModule unter Anbietern

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

  • Das Md-Präfix ist veraltet. Bitte geben Sie Lösungen mit Mat-Syntax an.

    – Tomasz Kula

    8. April 2018 um 17:55 Uhr


  • In meinem Fall musste ich sie auch aus der API mit import {MatDatepickerModule} from ‚@angular/material/datepicker‘ importieren; importiere {MatNativeDateModule} aus ‘@angular/material/’;

    – Max Wiederholt

    20. März 2019 um 21:27 Uhr

  • das funktioniert danke! aber was ist, wenn wir eine separate Datei zum Importieren von Material verwenden? können wir dort Anbieter einstellen? Ich bin neu dabei!

    – Sujeewa K. Abeysinghe

    7. Mai 2020 um 15:51 Uhr


  • Danke, ich habe gerade den MatNativeDateModule-Import aus dem Kern hinzugefügt und das funktioniert

    – Art

    9. September 2020 um 22:32 Uhr

  • Ich glaube nicht, dass Module in das Provider-Array gehören. Nur das Hinzufügen zu Importen sollte ausreichen

    – cBlaine

    17. Juni 2021 um 13:46 Uhr

Benutzer-Avatar
lila Silva

Winkel 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 beide importieren MatDatepickerModule und MatNativeDateModule unter Importe und hinzufügen MatDatepickerModule unter Anbietern

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

  • Danke, das hat für Angular 9 geholfen. BTW import { MatDatepickerModule, MatNativeDateModule } from ‘@angular/material’; arbeitet für 8

    – glitzern

    9. April 2020 um 18:25 Uhr

  • Warum müssen Sie sie zum Anbieter-Array hinzufügen?

    – NicuVlad

    11. November 2020 um 11:59 Uhr

  • Wenn nicht, müssen Sie jede Komponente weise einspritzen

    – lila silva

    12. Dezember 2020 um 15:47 Uhr

  • @lilansilva kannst du das näher erläutern? Mein Test funktioniert ohne Hinzufügen zu den Anbietern, aber vielleicht mache ich aus Gewohnheit etwas, das ich nicht tun muss

    – cBlaine

    17. Juni 2021 um 13:48 Uhr

Einfach importieren

MatNativeDateModul

zusammen mit

MatDatepickerModule

bei app.module.ts oder app-routing.module.ts.

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

Benutzer-Avatar
Tomasz Kula

Offizielle Dokumente: Fehler: MatDatepicker: Kein Anbieter für DateAdapter/MAT_DATE_FORMATS gefunden

Die Datumsauswahl wurde so erstellt, dass sie unabhängig von der Datumsimplementierung ist. Dies bedeutet, dass es mit einer Vielzahl unterschiedlicher Datumsimplementierungen arbeiten kann. Dies bedeutet jedoch auch, dass Entwickler sicherstellen müssen, dass der Datepicker die geeigneten Teile bereitstellt, damit er mit der von ihm gewählten Implementierung funktioniert. Der einfachste Weg, dies sicherzustellen, besteht darin, eines der vorgefertigten Module zu importieren: MatNativeDateModule, MatMomentDateModule.

Fix:

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

Im Gegensatz Nach dem, was einige Kollegen zuvor gesagt haben, sollten Sie MatDatepickerModule NICHT in das prodivers-Array einfügen, es sei denn, Sie haben einen guten Grund dafür.

Als eine Erinnerung (https://angular.io/guide/providers), und wie es in der offiziellen Dokumentation gut erklärt ist: Ein Anbieter ist eine Anweisung an das Dependency Injection-System, wie man einen Wert für eine Abhängigkeit erhält. Meistens handelt es sich bei diesen Abhängigkeiten um Dienste, die Sie erstellen und bereitstellen. Darüber hinaus sind Anbieter für alle Klassen in der Anwendung verfügbar, was meiner Meinung nach nicht der Zweck von MatDatepickerModule ist! (da Sie es nur in einigen wenigen Komponenten verwenden sollten)

Alles, was Sie also brauchen, ist natürlich den Beispielen zu folgen, die auf der offiziellen Angular-Website (https://material.angular.io/components/datepicker/overview)

Aber bevor wir die Lösung überprüfen, werfen wir einen Blick auf die selbsterklärende Fehlermeldung:

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

Es liegt nicht daran, dass der Fehler zunächst spricht Anbieter, dass Sie nur das Personal im Anbieter spritzen müssen. Lesen Sie den vollständigen Fehler weiter …

Nur ein Wort dazu DateAdapter: DateAdapter ist eine Klasse, die ein Objekt so anpasst, dass es von cdk-basierten Komponenten, die mit Datumsangaben arbeiten, als Datum verwendet werden kann. Dieser DateAdapter muss einige native Funktionen von MatNativeDateModule verwenden

Der Lösungsvorschlag lautet:

Importieren Sie in Ihrem app.module.ts sowohl MatDatepickerModule als auch MatNativeDateModule

...
import {MatDatepickerModule} from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
...
@NgModule({
  imports: [MatDatepickerModule, MatNativeDateModule],
})
export class MyApp {}

1206470cookie-checkWinkelmaterial: MatDatepicker: Kein Anbieter für DateAdapter gefunden

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy