problem with mat-date-range-picker

[posaomstart]

I have multilanguage app and I'm changing date locale based on selected country. I wan't to change only date popup header label and keep my original formating of the selected dates no matter what the locale is. for example: I want my date to look like 15.04.2024. no matter the locale and formatting of calendar header labell should staj APR 2024. for example: APR 2024 should stay formatted like that and change depending on the locale. Problem is when I override format function APR 2024 becomes 01.04.2024. in calendar header label.

Any help would be appreciated.

CODE

@Component({ selector: "datepicker-header", styles: ` .example-header { display: flex; align-items: center; padding: 0.5em; }

.example-header-label {
  flex: 1;
  height: 1em;
  font-weight: 500;
  text-align: center;
}

, template:

keyboard_arrow_left {{ periodLabel }} keyboard_arrow_right

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

`, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatButtonModule, MatIconModule, MatDatepickerModule], })

export class DatepickerHeader implements OnDestroy { private _destroyed = new Subject();

constructor( private _calendar: MatCalendar, private _dateAdapter: DateAdapter, @Inject(MAT_DATE_FORMATS) private _dateFormats: MatDateFormats, cdr: ChangeDetectorRef ) { _calendar.stateChanges.pipe(takeUntil(this._destroyed)).subscribe(() => cdr.markForCheck()); }

ngOnDestroy() { this._destroyed.next(); this._destroyed.complete(); }

get periodLabel() { return this._dateAdapter .format(this._calendar.activeDate, this._dateFormats.display.monthYearLabel) .toUpperCase(); // !!!!!!!!!!!!!!!!!!!!!! here I formatt LABEL wich is overriden by format function below } ....

}

export class CustomDateAdapter extends NativeDateAdapter {

override getFirstDayOfWeek(): number {
    return 1;
}
override format(date: Date, displayFormat: any): string {
  return moment(date).format("DD.MM.YYYY.");  // !!!!!!!!!!!!!!! function that I override, changes both header label and range select output formatting

} }

---

component.html <mat-date-range-input [rangePicker]="picker" style="margin-bottom: 8px;"> <input matStartDate readonly

                (dateChange)="dateMomentConverter($event.value );"
                 >
                <input matEndDate   readonly 
                (dateChange)="dateMomentConverter($event.value);"
                >
              </mat-date-range-input>
              <div class="popupImgDivDate">
                <mat-datepicker-toggle class="popupImg"  matIconSuffix [for]="picker" ></mat-datepicker-toggle>
              </div>
              <mat-date-range-picker (closed)="onDatepickerClose(key.colName)" #picker [calendarHeaderComponent]="datepickerHeaderMerge"></mat-date-range-picker>

---

and under providers inside app.module I have providers: [MatDatepickerModule, MatNativeDateModule, { provide: DateAdapter, useClass: CustomDateAdapter }, }

[amysorto]

I would take a look at our internationalization docs. There's some information there about overriding local locales if you want to keep your formatting consistent.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}