Winkel 9 - Wie kann NativeDateAdapter erweitert werden (Gebietsschema-fähiger Wochenbeginn)?

Dec 02 2020

Um ein Gebietsschema (in Bezug auf den Wochenbeginn) auf Material DatePicker aufmerksam zu machen, habe ich diese Erweiterung erstellt:

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

Ich habe es auch mit dem Konstruktor 0 args versucht und 1 als ersten Tag der Woche ständig neu abgestimmt. Ein Kollege sagte, das {providedIn: 'root'}könnte helfen - das tat es nicht.

Ich habe es app.module.tsals Anbieter angeschlossen:

{
  provide: DateAdapter,
  useClass: LocaleDateAdapter
}

Mein DatePicker ist folgendermaßen eingerichtet:

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

Das Problem ist, dass mein LocaleDateAdapter nicht instanziiert wird (Haltepunkt nicht erreicht) und sich der Wochenbeginn nicht ändert - sollte sich auf Montag ändern.

Wie funktioniert es?

Antworten

Mikelgo Dec 02 2020 at 16:47

Ich habe einen Stackblitz vorbereitet .

Ich habe mehr oder weniger das Gleiche getan wie du. Der Hauptunterschied (und ich denke, das ist das Problem, warum es bei Ihnen nicht funktioniert) ist jedoch, wie Sie das bereitstellen platform.

Das NativeDateAdapterbenötigt als zweites Argument die Plattform-ID, die Sie einfügen können. @Inject(PLATFORM_ID)Dadurch wird sichergestellt, dass Angulars DI die richtige Plattform-ID bereitstellt.

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

Die Implementierung von getFirstDayOfWeekist in Ordnung wie Sie.

Hinweis: In meinem Beispiel in AppModulezwinge ich mich, als LOCALE_IDWert für Deutschland zu verwenden de. Sie können es auch überschreiben mit z en-US. Sie müssen dann auch einen Kommentar abgeben registerLocaleDataoder einfach den gesamten Anbieter entfernen. dann solltest du als ersten tag der woche sonntag sehen.

Warum Ihr Konstruktor nicht ausgeführt wird, ist etwas verdächtig. Ich würde hier vermuten, dass dies etwas mit Ihrer Modulstruktur zu tun hat.