Как изменить первый день недели в 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 шт):
Необходимо было переопределение метода parse и format вдобавок. Если правильно помню названия методов, в общем один, который парсит строку для компоненты в объект Date, а второй, который возвращает строку или объект, который нам нужен. И все заработает. Версия ангуляр 17. В более старых версиях достаточно было переопределить getFirstDayOfWeek.