Angular 9 - как расширить (начало недели с учетом локали) NativeDateAdapter?

Dec 02 2020

Чтобы получить сведения о Locale (в отношении начала недели) Material DatePicker, я создал это расширение:

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

Я также пробовал с конструктором 0 args и постоянно перенастраивал 1 как первый день недели. Кто-то из коллег сказал, что это {providedIn: 'root'}может помочь, но не помогло.

Я подключил его app.module.tsкак провайдера:

{
  provide: DateAdapter,
  useClass: LocaleDateAdapter
}

мой DatePicker настроен так:

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

Проблема в том, что мой LocaleDateAdapter не создан (точка останова не достигнута) и начало недели не меняется - должно измениться на понедельник.

Как заставить работать?

Ответы

Mikelgo Dec 02 2020 at 16:47

Я приготовил стекблиц .

Я сделал более или менее то же самое, что и ты. Однако основное различие (и я думаю, в этом проблема, почему он не работает для вас) заключается в том, как вы предоставляете platform.

В NativeDateAdapterпотребности в качестве второго аргумента платформа ID , который вы можете придать с помощью @Inject(PLATFORM_ID)Это гарантирует , что правильная платформа идентификатор обеспечивается DI ANGULAR в.

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

Реализация getFirstDayOfWeekпрекрасна, как и вы.

Примечание: в моем примере AppModuleя заставляю использовать в LOCALE_IDкачестве значения для Германии, поэтому de. Вы также можете переопределить его, например en-US. Тогда вам также нужно закомментировать registerLocaleDataили просто удалить всего провайдера. тогда вы должны увидеть как первый день недели воскресенье.

Немного подозрительно, почему ваш конструктор не выполняется. Я предполагаю, что это как-то связано со структурой вашего модуля.