Angular 9 - Comment faire fonctionner NativeDateAdapter étendu (début de semaine sensible aux paramètres régionaux)?

Dec 02 2020

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.tstant 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

Mikelgo Dec 02 2020 at 16:47

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 NativeDateAdapterbesoin 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 getFirstDayOfWeekest bien comme vous l'avez fait.

Remarque: dans mon exemple dans AppModuleje suis obligé d'utiliser comme LOCALE_IDvaleur pour l'Allemagne, donc de. Vous pouvez également le remplacer avec par exemple en-US. Vous devez également commenter registerLocaleDataou 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.