refactor(pivotGrid): Replace use of Intl with new locale and fix columns not updated on locale change.

Author: skrustev

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid-dimensions.ts

@@ -5,6 +5,7 @@ import { GridColumnDataType } from '../../data-operations/data-util';
 import { IPivotDimension } from './pivot-grid.interface';
 import { PivotUtil } from './pivot-util';
 import { onResourceChangeHandle } from '../../core/utils';
+import { getI18nManager } from 'igniteui-i18n-core';
 
 export interface IPivotDateDimensionOptions {
     /** Enables/Disables total value of all periods. */
@@ -114,7 +115,6 @@ export class IgxPivotDateDimension implements IPivotDimension {
     private _defaultResourceStrings = getCurrentResourceStrings(GridResourceStringsEN);
     private _baseDimension: IPivotDimension;
     private _options: IPivotDateDimensionOptions = {};
-    private _monthIntl = new Intl.DateTimeFormat('default', { month: 'long' });
     private _destroyRef = inject(DestroyRef);
 
 
@@ -154,7 +154,8 @@ export class IgxPivotDateDimension implements IPivotDimension {
             memberName: 'Months',
             memberFunction: (rec) => {
                 const recordValue = PivotUtil.extractValueFromDimension(inBaseDimension, rec);
-                return recordValue ? this._monthIntl.format(new Date(recordValue)) : rec['Months'];
+                const dateValue = recordValue ? getI18nManager().createDateFromValue(recordValue) : null;
+                return recordValue ? getI18nManager().formatDateTime(dateValue, undefined, { month: 'long'}) : rec['Months'];
             },
             enabled: true,
             childLevel: baseDimension
@@ -165,7 +166,8 @@ export class IgxPivotDateDimension implements IPivotDimension {
             memberName: 'Quarters',
             memberFunction: (rec) => {
                 const recordValue = PivotUtil.extractValueFromDimension(inBaseDimension, rec);
-                return recordValue ? `Q` + Math.ceil((new Date(recordValue).getMonth() + 1) / 3) : rec['Quarters'];
+                const dateValue = recordValue ? getI18nManager().createDateFromValue(recordValue) : null;
+                return recordValue ? `Q` + Math.ceil((dateValue.getMonth() + 1) / 3) : rec['Quarters'];
             },
             enabled: true,
             childLevel: monthDimension
@@ -176,7 +178,8 @@ export class IgxPivotDateDimension implements IPivotDimension {
             memberName: 'Years',
             memberFunction: (rec) => {
                 const recordValue = PivotUtil.extractValueFromDimension(inBaseDimension, rec);
-                return recordValue ? (new Date(recordValue)).getFullYear().toString() : rec['Years'];
+                const dateValue = recordValue ? getI18nManager().createDateFromValue(recordValue) : null;
+                return recordValue ? dateValue.getFullYear().toString() : rec['Years'];
             },
             enabled: true,
             childLevel: quarterDimension

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts

@@ -70,7 +70,7 @@ import { IgxGridExcelStyleFilteringComponent, IgxExcelStyleColumnOperationsTempl
 import { IgxPivotGridNavigationService } from './pivot-grid-navigation.service';
 import { IgxPivotColumnResizingService } from '../resizing/pivot-grid/pivot-resizing.service';
 import { IgxFlatTransactionFactory, IgxOverlayService, State, Transaction, TransactionService } from '../../services/public_api';
-import { cloneArray, PlatformUtil, resizeObservable } from '../../core/utils';
+import { cloneArray, onResourceChangeHandle, PlatformUtil, resizeObservable } from '../../core/utils';
 import { IgxPivotFilteringService } from './pivot-filtering.service';
 import { DataUtil, GridColumnDataType } from '../../data-operations/data-util';
 import { IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
@@ -1060,6 +1060,10 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
             localeId,
             platform,
             _diTransactions);
+        onResourceChangeHandle(this.destroy$, () => {
+            // Since the columns are kinda static, due to assigning DisplayName on init, they need to be regenerated.
+            this.setupColumns();
+        }, this);
     }
 
     /**