refactor(calendar): Defer any creation of Intl.DateTimeFormat to new locale manager.

Author: skrustev

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

@@ -34,6 +34,7 @@ import { CalendarDay } from './common/model';
 import { IgxCalendarBaseDirective } from './calendar-base';
 import { KeyboardNavigationService } from './calendar.services';
 import { IgxDateFormatterPipe } from '../grids/common/pipes';
+import { getI18nManager } from 'igniteui-i18n-core';
 
 let NEXT_ID = 0;
 
@@ -879,12 +880,12 @@ export class IgxCalendarComponent extends IgxCalendarBaseDirective implements Af
 	 */
 	protected getFormattedDate(): { weekday: string; monthday: string } {
 		const date = this.headerDate;
-        const monthFormatter = new Intl.DateTimeFormat(this.locale, { month: 'short', day: 'numeric' })
-        const dayFormatter = new Intl.DateTimeFormat(this.locale, { weekday: 'short' })
+        const monthFormatted = getI18nManager().formatDateTime(date, this.locale, { month: 'short', day: 'numeric' });
+        const dayFormatted = getI18nManager().formatDateTime(date, this.locale,{ weekday: 'short' });
 
 		return {
-			monthday: monthFormatter.format(date),
-			weekday: dayFormatter.format(date),
+			monthday: monthFormatted,
+			weekday: dayFormatted,
 		};
 	}
 

projects/igniteui-angular/src/lib/calendar/common/helpers.ts

@@ -7,6 +7,7 @@ import {
 } from "./model";
 import { DateRangeDescriptor, DateRangeType } from "./types";
 import { first, last, modulo } from "../../core/utils";
+import { getI18nManager } from 'igniteui-i18n-core';
 
 interface IFormattedParts {
     value: string;
@@ -171,7 +172,7 @@ export function formatToParts(
     options: Intl.DateTimeFormatOptions,
     parts: string[],
 ): Record<string, any> {
-    const formatter = new Intl.DateTimeFormat(locale, options);
+    const formatter = getI18nManager().getDateFormatter(locale, options);
     const result: Record<string, any> = {
         date,
         full: formatter.format(date),

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

@@ -31,6 +31,7 @@ import {
     isDateInRanges,
 } from "../common/helpers";
 import { CalendarDay } from '../common/model';
+import { getI18nManager } from 'igniteui-i18n-core';
 
 let NEXT_ID = 0;
 
@@ -399,7 +400,7 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective {
      */
     public get weekHeaderLabels(): {long: string, formatted: string}[] {
         const weekdays = [];
-        const rawFormatter = new Intl.DateTimeFormat(this.locale, { weekday: 'long' });
+        const rawFormatter = getI18nManager().getDateFormatter(this.locale, { weekday: 'long' });
 
         for (const day of this.monthWeeks.at(0)) {
             weekdays.push({

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

@@ -157,7 +157,7 @@ export class IgxMonthsViewComponent extends IgxCalendarViewDirective implements
      * @hidden
      */
     public formattedMonth(value: Date): { long: string; formatted: string } {
-        const rawFormatter = new Intl.DateTimeFormat(this.locale, {
+        const rawFormatter = getI18nManager().getDateFormatter(this.locale, {
             month: "long",
             year: "numeric",
         });

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

@@ -130,7 +130,7 @@ export class IgxYearsViewComponent extends IgxCalendarViewDirective implements C
      * @hidden
      */
     public formattedYear(value: Date): {long: string, formatted: string} {
-        const rawFormatter = new Intl.DateTimeFormat(this.locale, { year: 'numeric' });
+        const rawFormatter = getI18nManager().getDateFormatter(this.locale, { year: 'numeric' });
 
         if (this.formatView) {
             return {