Angular 9 - como estender (início da semana ciente do local) NativeDateAdapter funcionando?

Question

Para obter um local ciente (em relação ao início da semana) Material DatePicker eu criei esta extensão:

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);
  }
}

Também tentei com o construtor 0 args e reajustando constantemente 1 como o primeiro dia da semana. Algum colega disse que isso {providedIn: 'root'}poderia ajudar - não ajudou.

Eu o conectei app.module.tscomo provedor:

{
  provide: DateAdapter,
  useClass: LocaleDateAdapter
}

meu DatePicker está configurado assim:

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

O problema é que meu LocaleDateAdapter não é instanciado (Breakpoint não atingido) e o início da semana não está mudando - deve mudar para segunda-feira.

Como fazer dar certo?

Answer 1

Eu preparei alguns stackblitz .

Eu fiz mais ou menos o mesmo que você. No entanto, a principal diferença (e acho que esse é o problema, por que não está funcionando para você) é como você fornece o platform.

O NativeDateAdapterprecisa como segundo argumento o id da plataforma que você pode injetar. @Inject(PLATFORM_ID)Isso garante que o id da plataforma correto seja fornecido pelo DI do Angular.

export class CustomDateAdapter extends NativeDateAdapter {
  constructor(
    @Inject(LOCALE_ID) public locale,
    @Inject(PLATFORM_ID) platformId
  ) {
    super(locale, platformId);
  }

A implementação de getFirstDayOfWeekestá bem como você fez.

Nota: no meu exemplo em AppModuleestou forçando a usar como LOCALE_IDo valor para a Alemanha, então de. Você também pode substituí-lo com, por exemplo en-US. Você também precisa comentar registerLocaleDataou apenas remover o provedor inteiro. então você deve ver como primeiro dia da semana o domingo.

Por que seu construtor não é executado é um pouco suspeito. Meu palpite aqui seria que isso tem algo a ver com a estrutura do módulo.