Add locale property to igx-grid - master

CHANGELOG.md

@@ -26,6 +26,7 @@ All notable changes for each version of this project will be documented in this
     - Added a new `igxToolbarCustomContent` directive which can be used to mark an `ng-template` which provides a custom content for the IgxGrid's toolbar ([#2983](https://github.com/IgniteUI/igniteui-angular/issues/2983))
     - Summary results are now calculated and displayed by default for each row group when 'Group By' feature is enabled.
     - `clearSummaryCache()` and `recalculateSummaries()` methods are deprecated. The grid will clear the cache and recalculate the summaries automatically when needed.
+	- `locale` property added. If not set, it returns browser's language. All child components will use it as locale.
     - **Breaking change** `IgxSummaryOperand.operate()` method is called with empty data in order to calculate the necessary height for the summary row. For custom summary operands, the method should always return an array of `IgxSummaryResult` with proper length.
 - `IgxIconModule`:
     - **Breaking change** `igxIconService` is now provided in root (providedIn: 'root') and `IgxIconModule.forRoot()` method is deprecated.

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

@@ -142,7 +142,7 @@ export class IgxCalendarComponent implements OnInit, ControlValueAccessor {
 
     /**
      * Gets the `locale` of the calendar.
-     * Default value is `"en"`.
+     * By default the browser's language is used.
      * ```typescript
      * let locale =  this.calendar.locale;
      * ```
@@ -156,7 +156,7 @@ export class IgxCalendarComponent implements OnInit, ControlValueAccessor {
     /**
      * Sets the `locale` of the calendar.
      * Expects a valid BCP 47 language tag.
-     * Default value is `"en"`.
+     * By default the browser's language is used.
      * ```html
      * <igx-calendar [locale] = "de"></igx-calendar>
      * ```
@@ -610,7 +610,7 @@ export class IgxCalendarComponent implements OnInit, ControlValueAccessor {
     /**
     *@hidden
     */
-    private _locale = 'en';
+    private _locale = window.navigator.language;
     /**
      *@hidden
      */

projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts

@@ -146,12 +146,12 @@ export class IgxDatePickerComponent implements ControlValueAccessor, EditorProvi
     public labelVisibility = true;
 
     /**
-     *An @Input property that sets locales. Default locale is en.
+     *An @Input property that sets locales. By default the browser's language is used.
      *```html
      *<igx-date-picker locale="ja-JP" [value]="date"></igx-date-picker>
      *```
      */
-    @Input() public locale: string = Constants.DEFAULT_LOCALE_DATE;
+    @Input() public locale: string = window.navigator.language;
 
     /**
      *An @Input property that sets on which day the week starts.
@@ -675,8 +675,8 @@ export class IgxDatePickerComponent implements ControlValueAccessor, EditorProvi
         });
     }
 
-    private _setLocaleToDate(value: Date, locale: string = Constants.DEFAULT_LOCALE_DATE): string {
-        return value.toLocaleDateString(locale);
+    private _setLocaleToDate(value: Date): string {
+        return value.toLocaleDateString(this.locale);
     }
 
     /**
@@ -685,18 +685,14 @@ export class IgxDatePickerComponent implements ControlValueAccessor, EditorProvi
      * @param date passed date
      */
     private _customFormatChecker(formatter: (_: Date) => string, date: Date) {
-        return this.formatter ? this.formatter(date) : this._setLocaleToDate(date, this.locale);
+        return this.formatter ? this.formatter(date) : this._setLocaleToDate(date);
     }
 
     private _onTouchedCallback: () => void = () => { };
 
     private _onChangeCallback: (_: Date) => void = () => { };
 }
 
-class Constants {
-    public static readonly DEFAULT_LOCALE_DATE = 'en';
-}
-
 /**
  * The IgxDatePickerModule provides the {@link IgxDatePickerComponent} inside your application.
  */

projects/igniteui-angular/src/lib/grids/README.md

@@ -186,6 +186,7 @@ Below is the list of all inputs that the developers may set to configure the gri
 |`transactions`| `TransactionService` | Transaction provider allowing access to all transactions and states of the modified rows. |
 |`summaryPosition`| GridSummaryPosition | The summary row position for the child levels. The default is top. |
 |`summaryCalculationMode`| GridSummaryCalculationMode | The summary calculation mode. The default is rootAndChildLevels, which means summaries are calculated for root and child levels. |
+|`locale`| string | Determines the locale of the grid. By default returns browser's language. |
 
 ### Outputs
 

projects/igniteui-angular/src/lib/grids/cell.component.html

@@ -4,7 +4,7 @@
         <div class="igx-grid__td-text">{{ formatter ? formatter(value) : value }}</div>
     </ng-container>
     <ng-template #default>
-        <div class="igx-grid__td-text">{{ column.dataType === 'number' ? (value | igxdecimal) : (value | igxdate) }}</div>
+        <div class="igx-grid__td-text">{{ column.dataType === 'number' ? (value | igxdecimal: grid.locale) : (value | igxdate: grid.locale) }}</div>
     </ng-template>
 </ng-template>
 <ng-template #inlineEditor  let-cell="cell">
@@ -22,7 +22,7 @@
         <igx-checkbox (change)="editValue = $event.checked" [value]="editValue" [checked]="editValue" [igxFocus]="focused" [disableRipple]="true"></igx-checkbox>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'date'">
-        <igx-date-picker (onSelection)="editValue = $event" [value]="editValue" [igxFocus]="focused" [labelVisibility]="false"></igx-date-picker>
+        <igx-date-picker (onSelection)="editValue = $event" [locale]="grid.locale" [value]="editValue" [igxFocus]="focused" [labelVisibility]="false"></igx-date-picker>
     </ng-container>
 </ng-template>
 <ng-container *ngTemplateOutlet="template; context: context">

projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.html

@@ -36,7 +36,7 @@
 </ng-template>
 
 <ng-template #defaultDateUI>
-    <igx-date-picker tabindex="0" [(ngModel)]="value" [locale]="locale" (onClose)="datePickerClose()">
+    <igx-date-picker tabindex="0" [(ngModel)]="value" [locale]="filteringService.grid.locale" (onClose)="datePickerClose()">
         <ng-template igxDatePickerTemplate let-openDialog="openDialog" let-displayData="displayData">
             <igx-input-group type="box" [displayDensity]="'compact'" [supressInputAutofocus]="true">
                 <igx-prefix #inputGroupPrefix

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

@@ -101,10 +101,6 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
         this.filter();
     }
 
-    get locale() {
-        return window.navigator.language;
-    }
-
     @ViewChild('defaultFilterUI', { read: TemplateRef })
     protected defaultFilterUI: TemplateRef<any>;
 

projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts

@@ -9,8 +9,8 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { IForOfState } from '../../directives/for-of/for_of.directive';
 import { IgxGridFilterConditionPipe } from '../grid-common.pipes';
-import { TitleCasePipe, DatePipe } from '@angular/common';
-import { IgxColumnComponent, IgxColumnGroupComponent } from '../grid';
+import { TitleCasePipe } from '@angular/common';
+import { IgxColumnComponent, IgxColumnGroupComponent, IgxDatePipeComponent } from '../grid';
 
 const FILTERING_ICONS_FONT_SET = 'filtering-icons';
 
@@ -38,7 +38,7 @@ export class IgxFilteringService implements OnDestroy {
     private columnToExpressionsMap = new Map<string, ExpressionUI[]>();
     private filterPipe = new IgxGridFilterConditionPipe();
     private titlecasePipe = new TitleCasePipe();
-    private datePipe = new DatePipe(window.navigator.language);
+    private _datePipe: IgxDatePipeComponent;
     private columnStartIndex = -1;
 
     public gridId: string;
@@ -76,6 +76,13 @@ export class IgxFilteringService implements OnDestroy {
         return this.gridAPI.get(this.gridId);
     }
 
+    public get datePipe(): IgxDatePipeComponent {
+        if (!this._datePipe) {
+            this._datePipe = new IgxDatePipeComponent(this.grid.locale);
+        }
+        return this._datePipe;
+    }
+
     /**
      * Subscribe to grid's events.
      */
@@ -286,7 +293,7 @@ export class IgxFilteringService implements OnDestroy {
         if (expression.condition.isUnary) {
             return this.grid.resourceStrings[`igx_grid_filter_${expression.condition.name}`] || expression.condition.name;
         } else if (expression.searchVal instanceof Date) {
-            return this.datePipe.transform(expression.searchVal);
+            return this.datePipe.transform(expression.searchVal, this.grid.locale);
         } else {
             return expression.searchVal;
         }

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

@@ -187,6 +187,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
     private _resourceStrings = CurrentResourceStrings.GridResStrings;
     private _emptyGridMessage = null;
     private _emptyFilteredGridMessage = null;
+    private _locale = null;
     /**
      * An accessor that sets the resource strings.
      * By default it uses EN resources.
@@ -292,6 +293,26 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         }
     }
 
+    /**
+     * Returns the locale of the grid.
+     * If not set, returns browser's language.
+     */
+    @Input()
+    get locale(): string {
+        if (this._locale) {
+            return this._locale;
+        } else {
+            return window.navigator.language;
+        }
+    }
+
+    /**
+     * Sets the locale of the grid.
+     */
+    set locale(value) {
+        this._locale = value;
+    }
+
     /**
      * Returns an array of objects containing the filtered data in the `IgxGridComponent`.
      * ```typescript

projects/igniteui-angular/src/lib/grids/grid.common.ts

@@ -26,6 +26,8 @@ import { ConnectedPositioningStrategy } from '../services';
 import { getPointFromPositionsSettings, VerticalAlignment, PositionSettings } from '../services/overlay/utilities';
 import { scaleInVerBottom, scaleInVerTop } from '../animations/main';
 
+const DEFAULT_DATE_FORMAT = 'mediumDate';
+
 /**
  * @hidden
  */
@@ -574,9 +576,13 @@ export class IgxDatePipeComponent extends DatePipe implements PipeTransform {
         // D.P. constructor duplication due to es6 compilation, might be obsolete in the future
         super(locale);
     }
-    transform(value: any): string {
+    transform(value: any, locale: string): string {
         if (value && value instanceof Date) {
-            return super.transform(value);
+            if (locale) {
+                return super.transform(value, DEFAULT_DATE_FORMAT, undefined, locale);
+            } else {
+                return super.transform(value);
+            }
         } else {
             return value;
         }
@@ -593,9 +599,13 @@ export class IgxDecimalPipeComponent extends DecimalPipe implements PipeTransfor
         // D.P. constructor duplication due to es6 compilation, might be obsolete in the future
         super(locale);
     }
-    transform(value: any): string {
+    transform(value: any, locale: string): string {
         if (value && typeof value === 'number') {
-            return super.transform(value);
+            if (locale) {
+                return super.transform(value, undefined, locale);
+            } else {
+                return super.transform(value);
+            }
         } else {
             return value;
         }

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts

@@ -25,6 +25,8 @@ import { SortingDirection } from '../../data-operations/sorting-expression.inter
 import { DefaultSortingStrategy } from '../../data-operations/sorting-strategy';
 import { IgxGridHeaderGroupComponent } from '../grid-header-group.component';
 import { changei18n, getCurrentResourceStrings } from '../../core/i18n/resources';
+import { registerLocaleData } from '@angular/common';
+import localeDE from '@angular/common/locales/de';
 
 const FILTER_UI_ROW = 'igx-grid-filtering-row';
 
@@ -2752,6 +2754,33 @@ describe('IgxGrid - Filtering Row UI actions', () => {
         filteringRow = fix.debugElement.query(By.directive(IgxGridFilteringRowComponent));
         expect(filteringRow).toBeNull();
     }));
+
+    it('should correctly apply locale to datePicker.', fakeAsync(() => {
+        const fix = TestBed.createComponent(IgxGridFilteringMCHComponent);
+        registerLocaleData(localeDE);
+        fix.detectChanges();
+
+        const grid = fix.componentInstance.grid;
+        grid.locale = 'de-DE';
+
+        const initialChips = fix.debugElement.queryAll(By.directive(IgxChipComponent));
+        const dateCellChip = initialChips[3].nativeElement;
+
+        dateCellChip.click();
+        fix.detectChanges();
+
+        const filteringRow = fix.debugElement.query(By.directive(IgxGridFilteringRowComponent));
+        const input = filteringRow.query(By.directive(IgxInputDirective));
+
+        input.nativeElement.click();
+        tick();
+        fix.detectChanges();
+
+        const calendar = fix.debugElement.query(By.css('igx-calendar'));
+        const sundayLabel = calendar.nativeElement.children[1].children[1].children[0].innerText;
+
+        expect(sundayLabel).toEqual('So');
+    }));
 });
 
 export class CustomFilter extends IgxFilteringOperand {

projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.html

@@ -12,7 +12,7 @@
 
                 <span class="igx-grid-summary__label" title="{{ summary.label }}">{{ translateSummary(summary) }}</span>
                 <span class="igx-grid-summary__result" title="{{ summary.summaryResult }}">
-                    {{ columnDatatype === 'number' ? (summary.summaryResult | igxdecimal) : columnDatatype === 'date' ? (summary.summaryResult | igxdate) : (summary.summaryResult) }}
+                    {{ columnDatatype === 'number' ? (summary.summaryResult | igxdecimal: grid.locale) : columnDatatype === 'date' ? (summary.summaryResult | igxdate: grid.locale) : (summary.summaryResult) }}
                 </span>
             </div>
     </ng-container>

projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.ts

@@ -165,7 +165,10 @@ export class IgxSummaryCellComponent {
         return this.column.grid.defaultRowHeight;
     }
 
-    private get grid() {
+    /**
+    * @hidden
+    */
+    public get grid() {
         return (this.column.grid as any);
     }
 

projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html

@@ -4,7 +4,7 @@
         <div class="igx-grid__td-text">{{ formatter ? formatter(value) : value }}</div>
     </ng-container>
     <ng-template #default>
-        <div class="igx-grid__td-text">{{ column.dataType === 'number' ? (value | igxdecimal) : (value | igxdate) }}</div>
+        <div class="igx-grid__td-text">{{ column.dataType === 'number' ? (value | igxdecimal: grid.locale) : (value | igxdate: grid.locale) }}</div>
     </ng-template>
 </ng-template>
 <ng-template #inlineEditor  let-cell="cell">
@@ -22,7 +22,7 @@
         <igx-checkbox (change)="editValue = $event.checked" [value]="editValue" [checked]="editValue" [disableRipple]="true"></igx-checkbox>
     </ng-container>
     <ng-container *ngIf="column.dataType === 'date'">
-        <igx-date-picker (onSelection)="editValue = $event" [value]="editValue" [labelVisibility]="false"></igx-date-picker>
+        <igx-date-picker (onSelection)="editValue = $event" [locale]="grid.locale" [value]="editValue" [labelVisibility]="false"></igx-date-picker>
     </ng-container>
 </ng-template>
 <ng-container *ngIf="!inEditMode">