feat(datepicker): respect first day of week in current locale (#2970)

src/datepicker/engine/format-days-calendar.ts

@@ -6,11 +6,9 @@ import {
 import { formatDate } from '../../bs-moment/format';
 import { getLocale } from '../../bs-moment/locale/locales.service';
 
-export function formatDaysCalendar(
-  daysCalendar: DaysCalendarModel,
-  formatOptions: DatepickerFormatOptions,
-  monthIndex: number
-): DaysCalendarViewModel {
+export function formatDaysCalendar(daysCalendar: DaysCalendarModel,
+                                   formatOptions: DatepickerFormatOptions,
+                                   monthIndex: number): DaysCalendarViewModel {
   return {
     month: daysCalendar.month,
     monthTitle: formatDate(
@@ -28,7 +26,7 @@ export function formatDaysCalendar(
       formatOptions.weekNumbers,
       formatOptions.locale
     ),
-    weekdays: getLocale(formatOptions.locale).weekdaysShort() as string[],
+    weekdays: getShiftedWeekdays(formatOptions.locale),
     weeks: daysCalendar.daysMatrix.map((week: Date[], weekIndex: number) => ({
       days: week.map((date: Date, dayIndex: number) => ({
         date,
@@ -41,12 +39,18 @@ export function formatDaysCalendar(
   };
 }
 
-export function getWeekNumbers(
-  daysMatrix: Date[][],
-  format: string,
-  locale: string
-): string[] {
+export function getWeekNumbers(daysMatrix: Date[][],
+                               format: string,
+                               locale: string): string[] {
   return daysMatrix.map(
     (days: Date[]) => (days[0] ? formatDate(days[0], format, locale) : '')
   );
 }
+
+export function getShiftedWeekdays(locale: string): string[] {
+  const _locale = getLocale(locale);
+  const weekdays = _locale.weekdaysShort() as string[];
+  const firstDayOfWeek = _locale.firstDayOfWeek();
+
+  return [...weekdays.slice(firstDayOfWeek), ...weekdays.slice(0, firstDayOfWeek)];
+}

src/datepicker/reducer/bs-datepicker.reducer.ts

@@ -23,6 +23,7 @@ import {
 } from '../models/index';
 import { isArray, isDateValid } from '../../bs-moment/utils/type-checks';
 import { startOf } from '../../bs-moment/utils/start-end-of';
+import { getLocale } from '../../bs-moment/locale/locales.service';
 
 export function bsDatepickerReducer(
   state = initialDatepickerState,
@@ -150,6 +151,7 @@ function calculateReducer(state: BsDatepickerState): BsDatepickerState {
   let viewDate = state.view.date;
 
   if (state.view.mode === 'day') {
+    state.monthViewOptions.firstDayOfWeek = getLocale(state.locale).firstDayOfWeek();
     const monthsModel = new Array(displayMonths);
     for (let monthIndex = 0; monthIndex < displayMonths; monthIndex++) {
       // todo: for unlinked calendars it will be harder

src/datepicker/utils/bs-calendar-utils.ts

@@ -9,17 +9,26 @@ import {
 } from '../../bs-moment/utils/date-compare';
 import { endOf, startOf } from '../../bs-moment/utils/start-end-of';
 
-export function getStartingDayOfCalendar(
-  date: Date,
-  options: { firstDayOfWeek?: number }
-): Date {
+export function getStartingDayOfCalendar(date: Date,
+                                         options: { firstDayOfWeek?: number }): Date {
   if (isFirstDayOfWeek(date, options.firstDayOfWeek)) {
     return date;
   }
 
   const weekDay = getDayOfWeek(date);
+  const offset = calculateDateOffset(weekDay, options.firstDayOfWeek);
 
-  return shiftDate(date, { day: -weekDay });
+  return shiftDate(date, {day: -offset});
+}
+
+export function calculateDateOffset(weekday: number, startingDayOffset: number): number {
+  if (startingDayOffset === 0) {
+    return weekday;
+  }
+
+  const offset = weekday - startingDayOffset % 7;
+
+  return offset < 0 ? offset + 7 : offset;
 }
 
 export function isMonthDisabled(date: Date, min: Date, max: Date): boolean {