feat(calendar): make weekStart default value to depend on current locale

Author: Volen99

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

@@ -8,6 +8,7 @@ import { IgxCalendarView } from './month-picker-base';
 import { CurrentResourceStrings } from '../core/i18n/resources';
 import { ICalendarResourceStrings } from '../core/i18n/calendar-resources';
 import { DateTimeUtil } from '../date-common/util/date-time.util';
+import { getLocaleFirstDayOfWeek } from "@angular/common";
 
 
 /**
@@ -258,6 +259,9 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
      */
     public set locale(value: string) {
         this._locale = value;
+        if (!this.weekStart) {
+            this.calendarModel.firstWeekDay = getLocaleFirstDayOfWeek(this._locale);
+        }
         this.initFormatters();
     }
 

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

@@ -38,6 +38,7 @@ import { DateTimeUtil } from '../date-common/util/date-time.util';
 import { PickerHeaderOrientation as PickerHeaderOrientation } from '../date-common/types';
 import { IDatePickerValidationFailedEventArgs } from './date-picker.common';
 import { IgxPickerClearComponent, IgxPickerActionsDirective } from '../date-common/public_api';
+import { getLocaleFirstDayOfWeek } from "@angular/common";
 
 let NEXT_ID = 0;
 
@@ -73,7 +74,7 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
      * ```
      */
     @Input()
-    public weekStart: WEEKDAYS | number = WEEKDAYS.SUNDAY;
+    public weekStart: WEEKDAYS | number = getLocaleFirstDayOfWeek(this.locale);
 
     /**
      * Gets/Sets whether the inactive dates will be hidden.
@@ -724,6 +725,11 @@ 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;
+        if (!this.weekStart) {
+            this.weekStart = getLocaleFirstDayOfWeek(this.locale);
+        }
     }
 
     /** @hidden @internal */

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

@@ -35,6 +35,7 @@ import {
     DateRange, IgxDateRangeEndComponent, IgxDateRangeInputsBaseComponent,
     IgxDateRangeSeparatorDirective, IgxDateRangeStartComponent
 } from './date-range-picker-inputs.common';
+import { getLocaleFirstDayOfWeek } from "@angular/common";
 
 const SingleInputDatesConcatenationString = ' - ';
 
@@ -110,7 +111,7 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
      * ```
      */
     @Input()
-    public weekStart = WEEKDAYS.SUNDAY;
+    public weekStart: WEEKDAYS | number = WEEKDAYS.SUNDAY;
 
     /**
      * Locale settings used for value formatting and calendar.
@@ -611,6 +612,11 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
     /** @hidden */
     public ngOnInit(): void {
         this._ngControl = this._injector.get<NgControl>(NgControl, null);
+
+        this.locale = this.locale || this._localeId;
+        if (!this.weekStart) {
+            this.weekStart = getLocaleFirstDayOfWeek(this.locale);
+        }
     }
 
     /** @hidden */

projects/igniteui-angular/src/lib/grids/columns/interfaces.ts

@@ -1,4 +1,5 @@
 import { ColumnType } from '../common/grid.interface';
+import { WEEKDAYS } from "../../calendar/calendar";
 
 
 /**
@@ -42,4 +43,7 @@ export interface IColumnPipeArgs {
      * The value is of type string. By default is set to 'symbol'
      */
     display?: string;
+
+    /** The first week day to be displayed in calendar when filtering or editing a date column */
+    weekStart?: number | WEEKDAYS;
 }

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

@@ -32,6 +32,7 @@ import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { ExpressionUI } from '../excel-style/common';
 import { ColumnType } from '../../common/grid.interface';
+import { getLocaleFirstDayOfWeek } from "@angular/common";
 
 /**
  * @hidden
@@ -278,6 +279,10 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
         }
     }
 
+    public get localeId(): number {
+        return getLocaleFirstDayOfWeek(this.filteringService.grid.locale);
+    }
+
     /**
      * Event handler for keydown on the input group's prefix.
      */

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.html

@@ -15,6 +15,7 @@
 </igx-select>
 
 <igx-date-picker #picker *ngIf="column.dataType === 'date'"
+    [weekStart]="column.pipeArgs.weekStart ?? localeId"
     [(value)]="expressionUI.expression.searchVal"
     [locale]="grid.locale"
     [outlet]="grid.outlet"

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-date-expression.component.ts

@@ -4,6 +4,7 @@ import { DisplayDensity } from '../../../core/density';
 import { IgxInputDirective } from '../../../directives/input/input.directive';
 import { IgxDatePickerComponent } from '../../../date-picker/public_api';
 import { IgxTimePickerComponent } from '../../../time-picker/time-picker.component';
+import { getLocaleFirstDayOfWeek } from "@angular/common";
 
 /**
  * @hidden
@@ -33,4 +34,8 @@ export class IgxExcelStyleDateExpressionComponent extends IgxExcelStyleDefaultEx
     public get inputTimePlaceholder(): string {
         return this.grid.resourceStrings['igx_grid_filter_row_time_placeholder'];
     }
+
+    public get localeId(): number {
+        return getLocaleFirstDayOfWeek(this.grid.locale);
+    }
 }