Angular 9 - Comment faire fonctionner NativeDateAdapter étendu (début de semaine sensible aux paramètres régionaux)?
Pour faire connaître les paramètres régionaux (en ce qui concerne le début de la semaine) Material DatePicker, j'ai créé cette extension:
import { Injectable } from "@angular/core";
import { LOCALE_ID, Inject } from "@angular/core";
import { Platform } from "@angular/cdk/platform";
import { getLocaleFirstDayOfWeek } from "@angular/common";
import { NativeDateAdapter } from '@angular/material/core';
@Injectable({providedIn: 'root'})
export class LocaleDateAdapter extends NativeDateAdapter {
constructor(@Inject(LOCALE_ID) public locale: string) {
super(locale, new Platform());
}
getFirstDayOfWeek() {
return getLocaleFirstDayOfWeek(this.locale);
}
}
J'ai également essayé avec le constructeur 0 args et en réaccordant constamment 1 comme premier jour de la semaine. Un collègue a dit que cela {providedIn: 'root'}
pourrait aider - ce n'est pas le cas.
Je l'ai accroché en app.module.ts
tant que fournisseur:
{
provide: DateAdapter,
useClass: LocaleDateAdapter
}
mon DatePicker est configuré comme ceci:
<mat-form-field appearance="fill">
<mat-label>set date</mat-label>
<input matInput [matDatepicker]="picker1" (dateChange)="onDateChange($event)" [formControl]=formDate>
<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
<mat-datepicker [startAt]="filter.date" #picker1></mat-datepicker>
</mat-form-field>
Le problème est que mon LocaleDateAdapter n'est pas instancié (point d'arrêt non atteint) et le début de la semaine ne change pas - devrait passer à lundi.
Comment le faire fonctionner?
Réponses
J'ai préparé du stackblitz .
J'ai fait plus ou moins la même chose que vous. Cependant, la principale différence (et je suppose que c'est le problème, pourquoi cela ne fonctionne pas pour vous) est la façon dont vous fournissez le fichier platform
.
Le NativeDateAdapter
besoin comme deuxième argument de l'ID de plate-forme que vous pouvez injecter par @Inject(PLATFORM_ID)
Cela garantit que l'ID de plate-forme correct est fourni par la DI d'Angular.
export class CustomDateAdapter extends NativeDateAdapter {
constructor(
@Inject(LOCALE_ID) public locale,
@Inject(PLATFORM_ID) platformId
) {
super(locale, platformId);
}
La mise en œuvre de getFirstDayOfWeek
est bien comme vous l'avez fait.
Remarque: dans mon exemple dans AppModule
je suis obligé d'utiliser comme LOCALE_ID
valeur pour l'Allemagne, donc de
. Vous pouvez également le remplacer avec par exemple en-US
. Vous devez également commenter registerLocaleData
ou supprimer tout le fournisseur. alors vous devriez voir comme premier jour de la semaine dimanche.
Pourquoi votre constructeur n'est pas exécuté est un peu suspect. Je suppose que cela a quelque chose à voir avec la structure de votre module.