web-dev-qa-db-fra.com

Angular matériau: MatDatepicker: aucun fournisseur trouvé pour DateAdapter

J'essaie d'utiliser le composant Datepicker dans Angular Material. Voici mon code HTML:

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

Cependant, cela ne fonctionne pas pour moi et j'obtiens l'erreur suivante:

Erreur: MatDatepicker: Aucun fournisseur trouvé pour DateAdapter.

Le message d'erreur me dit que j'ai besoin d'importer MatNativeDateModule ainsi que MatDatepickerModule, mais c'est ce que j'ai fait. Voici mon code d'importation ci-dessous de app.module.ts:

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

Y a-t-il autre chose qui me manque?

javascriptangularangular-material
27
ajgisme

Vous devez importer MatDatepickerModule et MatNativeDateModule sous imports et ajouter MatDatepickerModule sous fournisseurs

 imports: [
    MatDatepickerModule,
    MatNativeDateModule 
  ],
  providers: [  
    MatDatepickerModule,  
  ],
46
Sajeetharan - MSFT

Il suffit d'importer le

MatNativeDateModule

avec le

MatDatepickerModule

sur le site app.module.ts ou app-routing.module.ts.

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

Documents officiels: Erreur: MatDatepicker: Aucun fournisseur trouvé pour DateAdapter/MAT_DATE_FORMATS

Datepicker a été conçu pour être indépendant de la mise en œuvre de la date. Cela signifie qu'il peut fonctionner avec une variété d'implémentations de dates différentes. Cependant, cela signifie également que les développeurs doivent s'assurer de fournir les éléments appropriés pour que le sélecteur de date puisse utiliser l'implémentation choisie. Pour ce faire, le moyen le plus simple consiste à importer l'un des modules préconfigurés: MatNativeDateModule, MatMomentDateModule.

Réparer:

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