diff --git a/CHANGELOG.md b/CHANGELOG.md
index 08c2618f50e..e552dd19cb8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ All notable changes for each version of this project will be documented in this
- `IgxTimePickerComponent`: in addition to the current dialog interaction mode, now the user can select or edit a time value, using an editable masked input with a dropdown.
## 7.1.1
+### Features
+- `igxGrid`
+ - `locale` property added. If not set, it returns browser's language. All child components will use it as locale.
+
### Bug Fixes
* onSortingDone is not fired when sorting indicator of a header in the group by area is clicked ([#3257](https://github.com/IgniteUI/igniteui-angular/issues/3257))
* igx-grid isn't displayed properly in IE11 when it is inside an igx-tabs-group ([#3047](https://github.com/IgniteUI/igniteui-angular/issues/3047))
diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.component.ts b/projects/igniteui-angular/src/lib/calendar/calendar.component.ts
index 5bb9d3abe59..fab1af6b0dc 100644
--- a/projects/igniteui-angular/src/lib/calendar/calendar.component.ts
+++ b/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
*
* ```
@@ -610,7 +610,7 @@ export class IgxCalendarComponent implements OnInit, ControlValueAccessor {
/**
*@hidden
*/
- private _locale = 'en';
+ private _locale = window.navigator.language;
/**
*@hidden
*/
diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
index bd7fa901f4c..98319bc0590 100644
--- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
+++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
@@ -147,12 +147,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
*
*```
*/
- @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.
@@ -680,8 +680,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);
}
/**
@@ -690,7 +690,7 @@ 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 = () => { };
@@ -698,10 +698,6 @@ export class IgxDatePickerComponent implements ControlValueAccessor, EditorProvi
private _onChangeCallback: (_: Date) => void = () => { };
}
-class Constants {
- public static readonly DEFAULT_LOCALE_DATE = 'en';
-}
-
/**
* The IgxDatePickerModule provides the {@link IgxDatePickerComponent} inside your application.
*/
diff --git a/projects/igniteui-angular/src/lib/grids/README.md b/projects/igniteui-angular/src/lib/grids/README.md
index f9e58e5a17c..93f3e07a04a 100644
--- a/projects/igniteui-angular/src/lib/grids/README.md
+++ b/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
diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.html b/projects/igniteui-angular/src/lib/grids/cell.component.html
index 1ec199418fe..9e8cd36786a 100644
--- a/projects/igniteui-angular/src/lib/grids/cell.component.html
+++ b/projects/igniteui-angular/src/lib/grids/cell.component.html
@@ -4,7 +4,7 @@
{{ formatter ? formatter(value) : value }}
- {{ column.dataType === 'number' ? (value | igxdecimal) : (value | igxdate) }}
+ {{ column.dataType === 'number' ? (value | igxdecimal: grid.locale) : (value | igxdate: grid.locale) }}
@@ -22,7 +22,7 @@
-
+
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.html b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.html
index 59a32876a66..519cfa17861 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.html
+++ b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-row.component.html
@@ -36,7 +36,7 @@
-
+
;
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts b/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts
index 0de6d013d96..d8a2e665d33 100644
--- a/projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts
+++ b/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();
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;
}
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts
index 7ddb1603afe..9c2ba27092a 100644
--- a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts
+++ b/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
diff --git a/projects/igniteui-angular/src/lib/grids/grid.common.ts b/projects/igniteui-angular/src/lib/grids/grid.common.ts
index a971122b072..6dda8049ed6 100644
--- a/projects/igniteui-angular/src/lib/grids/grid.common.ts
+++ b/projects/igniteui-angular/src/lib/grids/grid.common.ts
@@ -26,6 +26,7 @@ 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 +575,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 +598,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;
}
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts
index b6e858f7f6a..2619e838d7c 100644
--- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts
+++ b/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 {
diff --git a/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.html b/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.html
index 07d845b7205..772be80cde0 100644
--- a/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.html
+++ b/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.html
@@ -12,7 +12,7 @@
{{ translateSummary(summary) }}
- {{ 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) }}
diff --git a/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.ts b/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.ts
index fad89d290d3..cbae6c5018e 100644
--- a/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.ts
+++ b/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);
}
diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html
index 3a6426104ed..34e99dd7c7a 100644
--- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html
+++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.html
@@ -4,7 +4,7 @@
{{ formatter ? formatter(value) : value }}
- {{ column.dataType === 'number' ? (value | igxdecimal) : (value | igxdate) }}
+ {{ column.dataType === 'number' ? (value | igxdecimal: grid.locale) : (value | igxdate: grid.locale) }}
@@ -22,7 +22,7 @@
-
+