Skip to content

Commit dc8e3c9

Browse files
skrustevskrustev
committed
feat(calendar): Get rid of formatters recreating in calendar and use locale manager.
1 parent 758c254 commit dc8e3c9

File tree

5 files changed

+42
-50
lines changed

5 files changed

+42
-50
lines changed

‎projects/igniteui-angular/src/lib/calendar/calendar-base.ts‎

Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -131,32 +131,44 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
131131
/**
132132
* @hidden
133133
*/
134-
protected formatterWeekday: Intl.DateTimeFormat;
134+
protected get formatterWeekday(): Intl.DateTimeFormat {
135+
return getI18nManager().getDateFormatter(this.locale, { weekday: this._formatOptions.weekday });
136+
}
135137

136138
/**
137139
* @hidden
138140
*/
139-
protected formatterDay: Intl.DateTimeFormat;
141+
protected get formatterDay(): Intl.DateTimeFormat {
142+
return getI18nManager().getDateFormatter(this.locale, { day: this._formatOptions.day });
143+
}
140144

141145
/**
142146
* @hidden
143147
*/
144-
protected formatterMonth: Intl.DateTimeFormat;
148+
protected get formatterMonth(): Intl.DateTimeFormat {
149+
return getI18nManager().getDateFormatter(this.locale, { month: this._formatOptions.month });
150+
}
145151

146152
/**
147153
* @hidden
148154
*/
149-
protected formatterYear: Intl.DateTimeFormat;
155+
protected get formatterYear(): Intl.DateTimeFormat {
156+
return getI18nManager().getDateFormatter(this.locale, { year: this._formatOptions.year });
157+
}
150158

151159
/**
152160
* @hidden
153161
*/
154-
protected formatterMonthday: Intl.DateTimeFormat;
162+
protected get formatterMonthDay(): Intl.DateTimeFormat {
163+
return getI18nManager().getDateFormatter(this.locale, { month: this._formatOptions.month, day: this._formatOptions.day });
164+
}
155165

156166
/**
157167
* @hidden
158168
*/
159-
protected formatterRangeday: Intl.DateTimeFormat;
169+
protected get formatterRangeDay(): Intl.DateTimeFormat {
170+
return getI18nManager().getDateFormatter(this.locale, { day: this._formatOptions.day, month: 'short' });
171+
}
160172

161173
/**
162174
* @hidden
@@ -316,7 +328,6 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
316328
*/
317329
public set formatOptions(formatOptions: IFormattingOptions) {
318330
this._formatOptions = {...this._formatOptions, ...formatOptions};
319-
this.initFormatters();
320331
}
321332

322333
/**
@@ -658,7 +669,6 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
658669
this._defaultLocale = getCurrentI18n();
659670
this._localeWeekStart = getLocaleFirstDayOfWeek(this.locale);
660671
this.viewDate = this.viewDate ? this.viewDate : new Date();
661-
this.initFormatters();
662672

663673
getI18nManager().onResourceChange((args: ResourceChangeEventArgs) => {
664674
this._defaultLocale = args.newLocale;
@@ -981,18 +991,6 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
981991
}
982992
}
983993

984-
/**
985-
* @hidden
986-
*/
987-
protected initFormatters() {
988-
this.formatterDay = new Intl.DateTimeFormat(this._locale, { day: this._formatOptions.day });
989-
this.formatterWeekday = new Intl.DateTimeFormat(this._locale, { weekday: this._formatOptions.weekday });
990-
this.formatterMonth = new Intl.DateTimeFormat(this._locale, { month: this._formatOptions.month });
991-
this.formatterYear = new Intl.DateTimeFormat(this._locale, { year: this._formatOptions.year });
992-
this.formatterMonthday = new Intl.DateTimeFormat(this._locale, { month: this._formatOptions.month, day: this._formatOptions.day });
993-
this.formatterRangeday = new Intl.DateTimeFormat(this._locale, { day: this._formatOptions.day, month: 'short' });
994-
}
995-
996994
/**
997995
* @hidden
998996
*/

‎projects/igniteui-angular/src/lib/calendar/calendar.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -893,8 +893,8 @@ export class IgxCalendarComponent extends IgxCalendarBaseDirective implements Af
893893
const dates = this.selectedDates as Date[];
894894

895895
return {
896-
start: this.formatterRangeday.format(dates.at(0)),
897-
end: this.formatterRangeday.format(dates.at(-1))
896+
start: this.formatterRangeDay.format(dates.at(0)),
897+
end: this.formatterRangeDay.format(dates.at(-1))
898898
};
899899
}
900900

‎projects/igniteui-angular/src/lib/calendar/common/calendar-view.directive.ts‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ import { CalendarDay, DayInterval } from "../common/model";
2222
import { getNextActiveDate, isDateInRanges } from "./helpers";
2323
import { DateRangeType } from "../../core/dates";
2424
import { isDate } from "../../core/utils";
25+
import { getCurrentI18n, getI18nManager, ResourceChangeEventArgs } from 'igniteui-i18n-core';
2526

2627
export enum Direction {
2728
NEXT = 1,
@@ -108,7 +109,9 @@ export abstract class IgxCalendarViewDirective implements ControlValueAccessor {
108109
/**
109110
* @hidden
110111
*/
111-
protected _formatter: Intl.DateTimeFormat;
112+
protected get formatter(): Intl.DateTimeFormat {
113+
return getI18nManager().getDateFormatter(this.locale);
114+
}
112115

113116
/**
114117
* @hidden
@@ -328,11 +331,6 @@ export abstract class IgxCalendarViewDirective implements ControlValueAccessor {
328331
this.activeDateChanged.emit(this.date);
329332
}
330333

331-
/**
332-
* @hidden
333-
*/
334-
protected abstract initFormatter(): void;
335-
336334
/**
337335
* @hidden
338336
*/

‎projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.ts‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
1616
import { CalendarDay } from "../common/model";
1717
import type { DayInterval } from "../common/model";
1818
import { calendarRange } from "../common/helpers";
19+
import { getI18nManager } from 'igniteui-i18n-core';
1920

2021
let NEXT_ID = 0;
2122

@@ -96,7 +97,6 @@ export class IgxMonthsViewComponent extends IgxCalendarViewDirective implements
9697
*/
9798
public set monthFormat(value: any) {
9899
this._monthFormat = value;
99-
this.initFormatter();
100100
}
101101

102102
/**
@@ -123,6 +123,13 @@ export class IgxMonthsViewComponent extends IgxCalendarViewDirective implements
123123
).map((m) => m.native);
124124
}
125125

126+
/**
127+
* @hidden
128+
*/
129+
protected override get formatter() {
130+
return getI18nManager().getDateFormatter(this.locale, { month: this.monthFormat });
131+
}
132+
126133
/**
127134
* @hidden
128135
*/
@@ -158,7 +165,7 @@ export class IgxMonthsViewComponent extends IgxCalendarViewDirective implements
158165
if (this.formatView) {
159166
return {
160167
long: rawFormatter.format(value),
161-
formatted: this._formatter.format(value),
168+
formatted: this.formatter.format(value),
162169
};
163170
}
164171

@@ -174,13 +181,4 @@ export class IgxMonthsViewComponent extends IgxCalendarViewDirective implements
174181
public monthTracker(_: number, item: Date): string {
175182
return `${item.getMonth()}}`;
176183
}
177-
178-
/**
179-
* @hidden
180-
*/
181-
protected initFormatter() {
182-
this._formatter = new Intl.DateTimeFormat(this._locale, {
183-
month: this.monthFormat,
184-
});
185-
}
186184
}

‎projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.ts‎

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
1414
import { CalendarDay } from "../common/model";
1515
import type { DayInterval } from "../common/model";
1616
import { calendarRange } from "../common/helpers";
17+
import { getI18nManager } from 'igniteui-i18n-core';
1718

1819
@Component({
1920
providers: [
@@ -55,6 +56,13 @@ export class IgxYearsViewComponent extends IgxCalendarViewDirective implements C
5556
this.#standalone = value;
5657
}
5758

59+
/**
60+
* @hidden
61+
*/
62+
protected override get formatter(): Intl.DateTimeFormat {
63+
return getI18nManager().getDateFormatter(this.locale, { year: this.yearFormat});
64+
}
65+
5866
/**
5967
* @hidden
6068
*/
@@ -86,7 +94,6 @@ export class IgxYearsViewComponent extends IgxCalendarViewDirective implements C
8694
*/
8795
public set yearFormat(value: any) {
8896
this._yearFormat = value;
89-
this.initFormatter();
9097
}
9198

9299
/**
@@ -128,7 +135,7 @@ export class IgxYearsViewComponent extends IgxCalendarViewDirective implements C
128135
if (this.formatView) {
129136
return {
130137
long: rawFormatter.format(value),
131-
formatted: this._formatter.format(value)
138+
formatted: this.formatter.format(value)
132139
}
133140
}
134141

@@ -145,15 +152,6 @@ export class IgxYearsViewComponent extends IgxCalendarViewDirective implements C
145152
return `${item.getFullYear()}}`;
146153
}
147154

148-
/**
149-
* @hidden
150-
*/
151-
protected initFormatter() {
152-
this._formatter = new Intl.DateTimeFormat(this._locale, {
153-
year: this.yearFormat,
154-
});
155-
}
156-
157155
/**
158156
* @hidden
159157
*/

0 commit comments

Comments
 (0)