refactor(locale): Replace any other occurances of formatting pipes.

skrustev · skrustev · commit 0b31b3d1cc6f · 2025-07-08T12:04:37.000+03:00
diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.component.ts b/projects/igniteui-angular/src/lib/calendar/calendar.component.ts
@@ -13,7 +13,7 @@ import {
 	booleanAttribute,
     HostListener,
 } from '@angular/core';
-import { NgTemplateOutlet, DatePipe } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import {
@@ -34,6 +34,7 @@ import { areSameMonth, formatToParts, getClosestActiveDate, isDateInRanges } fro
 import { CalendarDay } from './common/model';
 import { IgxCalendarBaseDirective } from './calendar-base';
 import { KeyboardNavigationService } from './calendar.services';
+import { IgxDateFormatterPipe } from '../grids/common/pipes';
 
 let NEXT_ID = 0;
 
@@ -71,7 +72,7 @@ let NEXT_ID = 0;
     ],
     selector: 'igx-calendar',
     templateUrl: 'calendar.component.html',
-    imports: [NgTemplateOutlet, IgxCalendarScrollPageDirective, IgxIconComponent, IgxDaysViewComponent, IgxMonthsViewComponent, IgxYearsViewComponent, DatePipe, IgxMonthViewSlotsCalendar, IgxGetViewDateCalendar]
+    imports: [NgTemplateOutlet, IgxCalendarScrollPageDirective, IgxIconComponent, IgxDaysViewComponent, IgxMonthsViewComponent, IgxYearsViewComponent, IgxDateFormatterPipe, IgxMonthViewSlotsCalendar, IgxGetViewDateCalendar]
 })
 export class IgxCalendarComponent extends IgxCalendarBaseDirective implements AfterViewInit, OnDestroy {
     /**
diff --git a/projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.ts b/projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.ts
@@ -9,7 +9,7 @@ import {
     OnDestroy,
     OnInit,
 } from "@angular/core";
-import { NgTemplateOutlet, DatePipe } from "@angular/common";
+import { NgTemplateOutlet } from "@angular/common";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 
 import { IgxMonthsViewComponent } from "../months-view/months-view.component";
@@ -21,6 +21,7 @@ import { CalendarDay } from "../common/model";
 import { IgxCalendarBaseDirective } from "../calendar-base";
 import { KeyboardNavigationService } from "../calendar.services";
 import { formatToParts } from "../common/helpers";
+import { IgxDateFormatterPipe } from '../../grids/common/pipes';
 
 let NEXT_ID = 0;
 @Component({
@@ -39,7 +40,7 @@ let NEXT_ID = 0;
     templateUrl: "month-picker.component.html",
     imports: [
         NgTemplateOutlet,
-        DatePipe,
+        IgxDateFormatterPipe,
         IgxIconComponent,
         IgxMonthsViewComponent,
         IgxYearsViewComponent,
diff --git a/projects/igniteui-angular/src/lib/core/utils.ts b/projects/igniteui-angular/src/lib/core/utils.ts
@@ -1,4 +1,4 @@
-import { CurrencyPipe, formatDate as _formatDate, isPlatformBrowser } from '@angular/common';
+import { formatDate as _formatDate, isPlatformBrowser } from '@angular/common';
 import { Inject, Injectable, InjectionToken, PLATFORM_ID, inject } from '@angular/core';
 import { mergeWith } from 'lodash-es';
 import { NEVER, Observable } from 'rxjs';
@@ -587,7 +587,20 @@ export function formatDate(value: Date | string | number | null | undefined, for
     if (typeof value === "string") {
         value = new Date(value);
     }
+    let dateStyle = undefined, timeStyle = undefined;
+    if (format === 'short' || format === 'medium' || format === 'long' || format === 'full') {
+        dateStyle = format;
+        timeStyle = format;
+    } else if (format.includes('Date')) {
+        dateStyle = format.replace('Date', '');
+    } else  if (format.includes('Time')) {
+        dateStyle = format.replace('Time', '');
+    } else {
+        // Match with Angular custom formatting?
+    }
     const options: Intl.DateTimeFormatOptions = {
+        dateStyle,
+        timeStyle,
         timeZone: timezone
     };
     return getI18nManager().formatDateTime(value, locale, options);
diff --git a/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.ts b/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.ts
@@ -13,12 +13,12 @@ import {
 } from '@angular/core';
 import { IgxGridCellComponent } from '../cell.component';
 import { PlatformUtil } from '../../core/utils';
-import { NgClass, NgTemplateOutlet, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe } from '@angular/common';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
 import { IgxGridSelectionService } from '../selection/selection.service';
 import { HammerGesturesManager } from '../../core/touch';
 import { GridType, IGX_GRID_BASE } from '../common/grid.interface';
 import { IgxOverlayService } from '../../services/public_api';
-import { IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxColumnFormatterPipe } from '../common/pipes';
+import { IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxColumnFormatterPipe, IgxNumberFormatterPipe, IgxPercentFormatterPipe, IgxCurrencyFormatterPipe, IgxDateFormatterPipe } from '../common/pipes';
 import { IgxTooltipDirective } from '../../directives/tooltip/tooltip.directive';
 import { IgxTooltipTargetDirective } from '../../directives/tooltip/tooltip-target.directive';
 import { IgxSuffixDirective } from '../../directives/suffix/suffix.directive';
@@ -40,7 +40,11 @@ import { IgxChipComponent } from '../../chips/chip.component';
     selector: 'igx-expandable-grid-cell',
     templateUrl: 'expandable-cell.component.html',
     providers: [HammerGesturesManager],
-    imports: [IgxChipComponent, IgxTextHighlightDirective, IgxIconComponent, NgClass, FormsModule, ReactiveFormsModule, IgxInputGroupComponent, IgxInputDirective, IgxFocusDirective, IgxCheckboxComponent, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateTimeEditorDirective, IgxPrefixDirective, IgxSuffixDirective, NgTemplateOutlet, IgxTooltipTargetDirective, IgxTooltipDirective, IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxColumnFormatterPipe, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe]
+    imports: [IgxChipComponent, IgxTextHighlightDirective, IgxIconComponent, NgClass, FormsModule, ReactiveFormsModule,
+        IgxInputGroupComponent, IgxInputDirective, IgxFocusDirective, IgxCheckboxComponent, IgxDatePickerComponent,
+        IgxTimePickerComponent, IgxDateTimeEditorDirective, IgxPrefixDirective, IgxSuffixDirective, NgTemplateOutlet,
+        IgxTooltipTargetDirective, IgxTooltipDirective, IgxGridCellImageAltPipe, IgxStringReplacePipe,
+        IgxColumnFormatterPipe, IgxNumberFormatterPipe, IgxPercentFormatterPipe, IgxCurrencyFormatterPipe, IgxDateFormatterPipe]
 })
 export class IgxGridExpandableCellComponent extends IgxGridCellComponent implements OnInit {
     /**
diff --git a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts
@@ -11,7 +11,7 @@ import {
     OnDestroy,
     Inject
 } from '@angular/core';
-import { NgTemplateOutlet, DecimalPipe, DatePipe, getLocaleCurrencyCode, PercentPipe, CurrencyPipe } from '@angular/common';
+import { NgTemplateOutlet,getLocaleCurrencyCode } from '@angular/common';
 
 import { takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
@@ -27,18 +27,18 @@ import { ISelectionNode } from '../common/types';
 import { IgxCheckboxComponent } from '../../checkbox/checkbox.component';
 import { IgxBadgeComponent } from '../../badge/badge.component';
 import { IgxIconComponent } from '../../icon/icon.component';
-import { IgxColumnFormatterPipe } from '../common/pipes';
+import { IgxColumnFormatterPipe, IgxCurrencyFormatterPipe, IgxDateFormatterPipe, IgxNumberFormatterPipe, IgxPercentFormatterPipe } from '../common/pipes';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.OnPush,
     selector: 'igx-grid-groupby-row',
     templateUrl: './groupby-row.component.html',
     imports: [
         NgTemplateOutlet,
-        DecimalPipe,
-        DatePipe,
-        PercentPipe,
-        CurrencyPipe,
+        IgxNumberFormatterPipe,
+        IgxDateFormatterPipe,
+        IgxPercentFormatterPipe,
+        IgxCurrencyFormatterPipe,
         IgxIconComponent,
         IgxBadgeComponent,
         IgxCheckboxComponent,
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-cell.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-cell.component.ts
@@ -5,7 +5,7 @@ import { HammerGesturesManager } from '../../core/touch';
 import { PlatformUtil } from '../../core/utils';
 import { GridType, IGX_GRID_BASE } from '../common/grid.interface';
 import { IgxOverlayService } from '../../services/public_api';
-import { IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxColumnFormatterPipe } from '../common/pipes';
+import { IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxColumnFormatterPipe, IgxNumberFormatterPipe, IgxPercentFormatterPipe, IgxCurrencyFormatterPipe, IgxDateFormatterPipe } from '../common/pipes';
 import { IgxTooltipDirective } from '../../directives/tooltip/tooltip.directive';
 import { IgxTooltipTargetDirective } from '../../directives/tooltip/tooltip-target.directive';
 import { IgxSuffixDirective } from '../../directives/suffix/suffix.directive';
@@ -22,14 +22,19 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { IgxIconComponent } from '../../icon/icon.component';
 import { IgxTextHighlightDirective } from '../../directives/text-highlight/text-highlight.directive';
 import { IgxChipComponent } from '../../chips/chip.component';
-import { NgClass, NgTemplateOutlet, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe } from '@angular/common';
+import { NgClass, NgTemplateOutlet } from '@angular/common';
 
 @Component({
     changeDetection: ChangeDetectionStrategy.OnPush,
     selector: 'igx-hierarchical-grid-cell',
     templateUrl: '../cell.component.html',
     providers: [HammerGesturesManager],
-    imports: [IgxChipComponent, IgxTextHighlightDirective, IgxIconComponent, NgClass, FormsModule, ReactiveFormsModule, IgxInputGroupComponent, IgxInputDirective, IgxFocusDirective, IgxTextSelectionDirective, IgxCheckboxComponent, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateTimeEditorDirective, IgxPrefixDirective, IgxSuffixDirective, NgTemplateOutlet, IgxTooltipTargetDirective, IgxTooltipDirective, IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxColumnFormatterPipe, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe]
+    imports: [IgxChipComponent, IgxTextHighlightDirective, IgxIconComponent, NgClass, FormsModule, ReactiveFormsModule,
+        IgxInputGroupComponent, IgxInputDirective, IgxFocusDirective, IgxTextSelectionDirective, IgxCheckboxComponent,
+        IgxDatePickerComponent, IgxTimePickerComponent, IgxDateTimeEditorDirective, IgxPrefixDirective,
+        IgxSuffixDirective, NgTemplateOutlet, IgxTooltipTargetDirective, IgxTooltipDirective, IgxGridCellImageAltPipe,
+        IgxStringReplacePipe, IgxColumnFormatterPipe, IgxNumberFormatterPipe, IgxPercentFormatterPipe,
+        IgxCurrencyFormatterPipe, IgxDateFormatterPipe]
 })
 export class IgxHierarchicalGridCellComponent extends IgxGridCellComponent implements OnInit {
     // protected hSelection;
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.ts
@@ -3,13 +3,13 @@ import {
     Component,
     Input
 } from '@angular/core';
-import { NgClass, NgStyle, NgTemplateOutlet, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe } from '@angular/common';
+import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common';
 
 import { HammerGesturesManager } from '../../core/touch';
 import { IgxGridExpandableCellComponent } from '../grid/expandable-cell.component';
 import { IgxTreeGridRow } from '../grid-public-row';
 import { RowType } from '../common/grid.interface';
-import { IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxColumnFormatterPipe } from '../common/pipes';
+import { IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxColumnFormatterPipe, IgxNumberFormatterPipe, IgxPercentFormatterPipe, IgxCurrencyFormatterPipe, IgxDateFormatterPipe } from '../common/pipes';
 import { IgxTooltipDirective } from '../../directives/tooltip/tooltip.directive';
 import { IgxTooltipTargetDirective } from '../../directives/tooltip/tooltip-target.directive';
 import { IgxCircularProgressBarComponent } from '../../progressbar/progressbar.component';
@@ -37,10 +37,10 @@ import { IgxTextSelectionDirective } from '../../directives/text-selection/text-
         NgClass,
         NgStyle,
         NgTemplateOutlet,
-        DecimalPipe,
-        PercentPipe,
-        CurrencyPipe,
-        DatePipe,
+        IgxNumberFormatterPipe,
+        IgxPercentFormatterPipe,
+        IgxCurrencyFormatterPipe,
+        IgxDateFormatterPipe,
         IgxChipComponent,
         IgxTextHighlightDirective,
         IgxIconComponent,
