Как изменить первый день недели в DateRangePicker?

Использую ангуляр 17 версии, нужно в дейт пикере сделать так, чтобы в календарике первым дне было не воскресенье 0, а понедельник 1. Вроде бы почитал, что достаточно изменить локализацию на русскую и оно подтянет первый день как понедельник, локализацию изменил, функция getLocaleFirstDayOfWeek возвращает понедельник 1. Сама компонента отображается на русском, те локализация отрабатывает. Но первый день все роно воскресенье. С кастомным адаптером валится ошибка в модуле не доходя до компоненты сам модуль:

import {Inject, Injectable, LOCALE_ID, NgModule} from '@angular/core';
import {RouterModule} from '@angular/router';
import {CommonModule, DatePipe, getLocaleFirstDayOfWeek, registerLocaleData} from '@angular/common';
import {PORTFOLIO_GROWTH_ROUTES} from '@profitservice/portfolio-growth-page/portfolio-growth-page.routes';
import {PortfolioGrowthPageComponent} from '@profitservice/portfolio-growth-page/portfolio-growth-page.component';
import {PortfolioGrowthService} from '@profitservice/portfolio-growth-page/services/portfolio-growth.service';
import {
  ButtonModule,
  LoadingSpinnerModule,
  TableModule,
} from '@sbam-shared/ui-components';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatSelectModule} from '@angular/material/select';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatInputModule} from '@angular/material/input';
import {MatIconModule} from '@angular/material/icon';
import {MatButtonModule} from '@angular/material/button';
import {MatChipsModule} from '@angular/material/chips';
import {MatAutocompleteModule} from '@angular/material/autocomplete';
import {CurrencyPipe, PercentPipe} from '@shared/pipes';
import {MatProgressSpinner} from '@angular/material/progress-spinner';
import {MatDatepickerModule} from '@angular/material/datepicker';
import {
  MAT_DATE_LOCALE,
  MatNativeDateModule,
  NativeDateAdapter,
  DateAdapter
} from '@angular/material/core';
import localeRu from '@angular/common/locales/ru';

@Injectable()
export class CustomDateAdapter extends NativeDateAdapter {
  constructor(
    @Inject(LOCALE_ID) public localeId: string
  ) {
    super(localeId)
  }

  override getFirstDayOfWeek(): number {
    return getLocaleFirstDayOfWeek(this.localeId)
  }
}

registerLocaleData(localeRu);
@NgModule({
  declarations: [PortfolioGrowthPageComponent],
  imports: [
    CommonModule,
    RouterModule.forChild(PORTFOLIO_GROWTH_ROUTES),
    TableModule,
    LoadingSpinnerModule,
    ButtonModule,
    MatFormFieldModule,
    MatInputModule,
    MatSelectModule,
    FormsModule,
    ReactiveFormsModule,
    MatIconModule,
    MatButtonModule,
    MatChipsModule,
    MatAutocompleteModule,
    MatProgressSpinner,
    MatDatepickerModule,
    MatNativeDateModule,
  ],
  providers: [
    PortfolioGrowthService,
    CurrencyPipe,
    PercentPipe,
    {provide: DateAdapter, useValue: CustomDateAdapter},
    {provide: LOCALE_ID, useValue: 'ru'},
    {provide: MAT_DATE_LOCALE, useValue: 'ru'},
    DatePipe,
  ],
})
export class PortfolioGrowthModule {
} 

сама ошибка:

Uncaught TypeError: Cannot read properties of undefined (reading
zone.js:162
'subscribe')
at new MatDatepickerInputBase (datepicker.mis: 3048:63)
at new MatDateRangeInputPartBase (datepicker.mis: 3669:9)
at new MatStartDate (datepicker.mis: 3786:9)
at NodeInjectorFactory MatStartDate_Factory [as factory] (datepicker.mjs: 3839:23)
at getNodeInjectable (core.mis: 6986:44)
at searchTokensOnInjector (core.mjs: 6913:16)
at lookupTokenUsingNodeInjector (cone.mis: 6862:34)
at getOrCreateInjectable (core.mis: 6774:23)
at eedirectivelnject (core.mjs:10349:19)
at eeinject (core.mis: 3848:60)

и проблема не в компоненте, так как убирал ренж пикер, все ровно именно в модуле ошибка возникает. Как правильно кастомный адаптер настроить для этого рендж пикера


Ответы (1 шт):

Автор решения: Gennady Makar

Необходимо было переопределение метода parse и format вдобавок. Если правильно помню названия методов, в общем один, который парсит строку для компоненты в объект Date, а второй, который возвращает строку или объект, который нам нужен. И все заработает. Версия ангуляр 17. В более старых версиях достаточно было переопределить getFirstDayOfWeek.

→ Ссылка