fix(pivot-grid): fix date format based on the localization

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

@@ -139,7 +139,33 @@ export class IgxPivotDateDimension implements IPivotDimension {
         this.enabled = inBaseDimension.enabled;
         this.displayName = inBaseDimension.displayName || this.resourceStrings.igx_grid_pivot_date_dimension_total;
 
-        const baseDimension = options.fullDate ? inBaseDimension : null;
+        // When fullDate is enabled and the user has not provided a custom memberFunction,
+        // attach a locale-aware formatter so the leaf date values are displayed in
+        // short-date format instead of the raw data string.
+        // When the user provides their own memberFunction, the dimension is used as-is
+        // (spread-create is skipped) to avoid overriding the user's intended formatting.
+        let baseDimension: IPivotDimension = null;
+        if (options.fullDate) {
+            if (inBaseDimension.memberFunction) {
+                // User supplied a custom memberFunction — preserve it without adding a formatter.
+                baseDimension = inBaseDimension;
+            } else {
+                // No custom memberFunction: create a new dimension object with a locale-aware
+                // formatter that shows dates in short-date format.
+                baseDimension = {
+                    ...inBaseDimension,
+                    formatter: (value: any) => {
+                        const dateValue = (value !== null && value !== undefined && value !== '')
+                            ? getDateFormatter().createDateFromValue(value)
+                            : null;
+                        return dateValue
+                            ? getDateFormatter().formatDateTime(dateValue, undefined, { dateStyle: 'short' })
+                            : value;
+                    }
+                };
+            }
+        }
+
         const monthDimensionDef: IPivotDimension = {
             memberName: 'Months',
             memberFunction: (rec) => {

projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts

@@ -140,6 +140,19 @@ export interface IPivotDimension {
     /** @hidden @internal */
     autoWidth?: number;
     horizontalSummary? : boolean;
+    /**
+     * Optional function to format the display value of a dimension cell.
+     * Unlike `memberFunction`, this does not affect the data key used for grouping or sorting —
+     * it is applied only when rendering the dimension header text.
+     * When set, the return value of this function is shown instead of the raw dimension value.
+     *
+     * @example
+     * ```typescript
+     * // Display dates in a locale-aware short date format.
+     * { memberName: 'Date', enabled: true, formatter: (value) => new Date(value).toLocaleDateString() }
+     * ```
+     */
+    formatter?: (value: any) => string;
 }
 
 /* marshalByValue */

projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.spec.ts

@@ -1245,7 +1245,8 @@ describe('IgxPivotGrid #pivotGrid', () => {
                 // check rows
                 const rows = pivotGrid.rowList.toArray();
                 expect(rows.length).toBe(5);
-                const expectedHeaders = ['All Periods', '2021', 'Q4', 'December', '12/08/2021'];
+                const formattedDate = Intl.DateTimeFormat(undefined, { dateStyle: 'short' }).format(new Date(2021, 11, 8));
+                const expectedHeaders = ['All Periods', '2021', 'Q4', 'December', formattedDate];
                 const rowHeaders = fixture.debugElement.queryAll(
                     By.directive(IgxPivotRowDimensionHeaderComponent));
                 const rowDimensionHeaders = rowHeaders.map(x => x.componentInstance.column.header);

projects/igniteui-angular/grids/pivot-grid/src/pivot-row-dimension-content.component.ts

@@ -183,7 +183,11 @@ export class IgxPivotRowDimensionContentComponent extends IgxGridHeaderRowCompon
 
     protected extractFromDimension(dim: IPivotDimension, rowData: IPivotGridGroupRecord) {
         const field = dim.memberName;
-        const header = rowData?.dimensionValues.get(field);
+        const rawHeader = rowData?.dimensionValues.get(field);
+        let header = rawHeader;
+        if (dim.formatter != null) {
+            header = dim.formatter(rawHeader) ?? rawHeader;
+        }
         const col = this._createColComponent(field, header, dim);
         return col;
     }