feat(localization): Apply new localization to calendar and date picker based components.

Author: skrustev

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

@@ -6,7 +6,7 @@ import { noop, Subject } from 'rxjs';
 import { getLocaleFirstDayOfWeek, isDate, isEqual, PlatformUtil } from '../core/utils';
 import { CalendarResourceStringsEN, ICalendarResourceStrings } from '../core/i18n/calendar-resources';
 import { DateTimeUtil } from '../date-common/util/date-time.util';
-import { getCurrentResourceStrings } from '../core/i18n/resources';
+import { getCurrentResourceStrings, initi18n } from '../core/i18n/resources';
 import { KeyboardNavigationService } from './calendar.services';
 import { getYearRange, isDateInRanges } from './common/helpers';
 import { CalendarDay } from './common/model';
@@ -649,7 +649,8 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
         protected keyboardNavigation?: KeyboardNavigationService,
         protected cdr?: ChangeDetectorRef,
     ) {
-        this.locale = getCurrentI18n() || _localeId;
+        initi18n(_localeId);
+        this.locale = getCurrentI18n();
         this.viewDate = this.viewDate ? this.viewDate : new Date();
         this.initFormatters();
 

projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts

@@ -3,14 +3,12 @@ import {
     AfterViewInit, booleanAttribute, ContentChildren, Directive, ElementRef, EventEmitter,
     Inject, Input, LOCALE_ID, OnDestroy, Optional, Output, QueryList, ViewChild
 } from '@angular/core';
-import { getLocaleFirstDayOfWeek } from "@angular/common";
-
 import { merge, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 import { EditorProvider } from '../core/edit-provider';
 import { IToggleView } from '../core/navigation';
-import { IBaseCancelableBrowserEventArgs, IBaseEventArgs } from '../core/utils';
+import { getLocaleFirstDayOfWeek, IBaseCancelableBrowserEventArgs, IBaseEventArgs } from '../core/utils';
 import { IgxOverlayOutletDirective } from '../directives/toggle/toggle.directive';
 import { OverlaySettings } from '../services/overlay/utilities';
 import { IgxPickerToggleComponent } from './picker-icons.common';
@@ -21,6 +19,8 @@ import { IGX_INPUT_GROUP_TYPE, IgxInputGroupType } from '../input-group/inputGro
 import { IgxPrefixDirective } from '../directives/prefix/prefix.directive';
 import { IgxSuffixDirective } from '../directives/suffix/suffix.directive';
 import { IgxInputGroupComponent } from '../input-group/input-group.component';
+import { getCurrentI18n } from 'igniteui-i18n-core';
+import { initi18n } from '../core/i18n/resources';
 
 @Directive()
 export abstract class PickerBaseDirective implements IToggleView, EditorProvider, AfterViewInit, AfterContentChecked, OnDestroy {
@@ -121,12 +121,6 @@ export abstract class PickerBaseDirective implements IToggleView, EditorProvider
      */
     public set locale(value: string) {
         this._locale = value;
-        // if value is invalid, set it back to _localeId
-        try {
-            getLocaleFirstDayOfWeek(this._locale);
-        } catch (e) {
-            this._locale = this._localeId;
-        }
     }
 
     /**
@@ -294,7 +288,8 @@ export abstract class PickerBaseDirective implements IToggleView, EditorProvider
     constructor(public element: ElementRef,
         @Inject(LOCALE_ID) protected _localeId: string,
         @Optional() @Inject(IGX_INPUT_GROUP_TYPE) protected _inputGroupType?: IgxInputGroupType) {
-        this.locale = this.locale || this._localeId;
+        initi18n(_localeId);
+        this.locale = this.locale || getCurrentI18n();
     }
 
     /** @hidden @internal */

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

@@ -66,9 +66,9 @@ import {
 import { IDatePickerValidationFailedEventArgs } from './date-picker.common';
 import { IgxIconComponent } from '../icon/icon.component';
 import { IgxTextSelectionDirective } from '../directives/text-selection/text-selection.directive';
-import { getCurrentResourceStrings } from '../core/i18n/resources';
+import { getCurrentResourceStrings, initi18n } from '../core/i18n/resources';
 import { fadeIn, fadeOut } from 'igniteui-angular/animations';
-import { getI18nManager } from 'igniteui-i18n-core';
+import { getCurrentI18n, getI18nManager } from 'igniteui-i18n-core';
 
 let NEXT_ID = 0;
 
@@ -517,7 +517,8 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
         private cdr: ChangeDetectorRef,
         @Optional() @Inject(IGX_INPUT_GROUP_TYPE) _inputGroupType?: IgxInputGroupType) {
         super(element, _localeId, _inputGroupType);
-        this.locale = this.locale || this._localeId;
+        initi18n(_localeId);
+        this.locale = this.locale || getCurrentI18n();
         getI18nManager().onResourceChange(() => {
             this._resourceStrings = getCurrentResourceStrings(DatePickerResourceStringsEN, false);
         });
@@ -763,8 +764,8 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
     /** @hidden @internal */
     public ngOnInit(): void {
         this._ngControl = this._injector.get<NgControl>(NgControl, null);
-
-        this.locale = this.locale || this._localeId;
+        initi18n(this._localeId);
+        this.locale = this.locale || getCurrentI18n();
     }
 
     /** @hidden @internal */

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

@@ -4,7 +4,7 @@ import {
     OnChanges, OnDestroy, OnInit, Optional, Output, QueryList,
     SimpleChanges, TemplateRef, ViewChild, ViewContainerRef
 } from '@angular/core';
-import { NgTemplateOutlet, getLocaleFirstDayOfWeek } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import {
     AbstractControl, ControlValueAccessor, NgControl,
     NG_VALIDATORS, NG_VALUE_ACCESSOR, ValidationErrors, Validator
@@ -33,9 +33,9 @@ import {
 import { DateRange, IgxDateRangeEndComponent, IgxDateRangeInputsBaseComponent, IgxDateRangeSeparatorDirective, IgxDateRangeStartComponent, DateRangePickerFormatPipe } from './date-range-picker-inputs.common';
 import { IgxPrefixDirective } from '../directives/prefix/prefix.directive';
 import { IgxIconComponent } from '../icon/icon.component';
-import { getCurrentResourceStrings } from '../core/i18n/resources';
+import { getCurrentResourceStrings, initi18n } from '../core/i18n/resources';
 import { fadeIn, fadeOut } from 'igniteui-angular/animations';
-import { getI18nManager } from 'igniteui-i18n-core';
+import { getCurrentI18n, getI18nManager } from 'igniteui-i18n-core';
 
 const SingleInputDatesConcatenationString = ' - ';
 
@@ -347,12 +347,6 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
      */
     public override set locale(value: string) {
         this._locale = value;
-        // if value is invalid, set it back to _localeId
-        try {
-            getLocaleFirstDayOfWeek(this._locale);
-        } catch (e) {
-            this._locale = this._localeId;
-        }
         if (this.hasProjectedInputs) {
             this.updateInputLocale();
             this.updateDisplayFormat();
@@ -476,7 +470,8 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
         @Inject(IgxOverlayService) private _overlayService: IgxOverlayService,
         @Optional() @Inject(IGX_INPUT_GROUP_TYPE) _inputGroupType?: IgxInputGroupType) {
         super(element, _localeId, _inputGroupType);
-        this.locale = this.locale || this._localeId;
+        initi18n(_localeId);
+        this.locale = this.locale || getCurrentI18n();
         getI18nManager().onResourceChange(() => {
             this._resourceStrings = getCurrentResourceStrings(DateRangePickerResourceStringsEN, false);
         });

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

@@ -58,9 +58,9 @@ import { TimeFormatPipe, TimeItemPipe } from './time-picker.pipes';
 import { IgxSuffixDirective } from '../directives/suffix/suffix.directive';
 import { IgxIconComponent } from '../icon/icon.component';
 import { IgxPrefixDirective } from '../directives/prefix/prefix.directive';
-import { getCurrentResourceStrings } from '../core/i18n/resources';
+import { getCurrentResourceStrings, initi18n } from '../core/i18n/resources';
 import { IgxDividerDirective } from '../directives/divider/divider.directive';
-import { getI18nManager } from 'igniteui-i18n-core';
+import { getCurrentI18n, getI18nManager } from 'igniteui-i18n-core';
 
 let NEXT_ID = 0;
 export interface IgxTimePickerValidationFailedEventArgs extends IBaseEventArgs {
@@ -624,7 +624,8 @@ export class IgxTimePickerComponent extends PickerBaseDirective
         private cdr: ChangeDetectorRef,
     ) {
         super(element, _localeId, _inputGroupType);
-        this.locale = this.locale || this._localeId;
+        initi18n(_localeId);
+        this.locale = this.locale || getCurrentI18n();
         getI18nManager().onResourceChange(() => {
             this._resourceStrings = getCurrentResourceStrings(TimePickerResourceStringsEN, false);
         });