fix: datepicker update all fields after changing the locale (#1142)

* #1140 fix the localization issue on day view after changing i18n

* update i18n example

* Add month names getter to month view

docs/app/documentation/component-docs/date-picker/examples/date-picker-i18n-example.component.ts

@@ -3,35 +3,61 @@ import { Component, Injectable } from '@angular/core';
 import { CalendarI18nLabels } from '../../../../../../library/src/lib/calendar/i18n/calendar-i18n-labels';
 import { FdDate } from '../../../../../../library/src/lib/calendar/models/fd-date';
 
+// The weekdays translations have to start with Sunday
 const localized_values = {
     'fr': {
         weekdays: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'],
         months: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Aou', 'Sep', 'Oct', 'Nov', 'Déc'],
         fullMonths: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet',
             'Aout', 'Septembre', 'Octobre', 'Novembre', 'Décembre']
+    },
+    'de': {
+        weekdays: ['Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag', 'Sonntag', 'Montag'],
+        months: [' Jän', 'Feb', 'März', 'Apr', 'Mai', 'Juni', 'Juli', 'Aug', 'Sept', 'Okt', 'Nov', 'Dez'],
+        fullMonths: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember']
+    },
+    'bg': {
+        weekdays: ['неделя', 'понеделник', 'вторник', 'сряда', 'четвъртък', 'петък', 'събота'],
+        months: [' яну', 'фев', 'март', 'апр', 'май', 'юни', 'юли', 'авг', 'септ', 'окт', 'ное', 'дек'],
+        fullMonths: ['януари', 'февруари', 'март', 'април', 'май', 'юни', 'юли', 'август', 'септември', 'октомври', 'ноември', 'декември']
     }
 };
 
+@Injectable({
+    providedIn: 'root',
+})
+export class LanguageService {
+
+    selectedLanguage: string = 'bg';
+
+    setLanguage(newLanguage: string) {
+        this.selectedLanguage = newLanguage;
+    }
+
+    getLanguage() { return this.selectedLanguage; }
+}
+
 @Injectable()
 export class CustomCalendarI18n extends CalendarI18n {
 
-    // You could also define a custom service and inject it here
-    language: string = 'fr';
+    constructor(private languageService: LanguageService) {
+        super();
+    }
 
     getDayAriaLabel(date: Date): string {
-        return date.getDate() + ' ' + localized_values[this.language].fullMonths[date.getMonth()] + ' ' + date.getFullYear();
+        return date.getDate() + ' ' + localized_values[this.languageService.getLanguage()].fullMonths[date.getMonth()] + ' ' + date.getFullYear();
     }
 
     getAllFullMonthNames(): string[] {
-        return localized_values[this.language].fullMonths;
+        return localized_values[this.languageService.getLanguage()].fullMonths;
     }
 
     getAllShortMonthNames(): string[] {
-        return localized_values[this.language].months;
+        return localized_values[this.languageService.getLanguage()].months;
     }
 
     getAllShortWeekdays(): string[] {
-        return localized_values[this.language].weekdays;
+        return localized_values[this.languageService.getLanguage()].weekdays;
     }
 }
 
@@ -55,7 +81,15 @@ export class CustomI18nLabels extends CalendarI18nLabels {
 @Component({
     selector: 'fd-datepicker-i18n-example',
     template: `
-        <fd-date-picker [(ngModel)]="date"></fd-date-picker>`,
+        <label fd-form-label for="language">Select language:</label>
+        <fd-button-group id="language" style="margin-bottom:20px">
+            <button fd-button-grouped [size]="'xs'" (click)="setFrench()" [state]="isSelected('fr')">French</button>
+            <button fd-button-grouped [size]="'xs'" (click)="setGerman()" [state]="isSelected('de')">German</button>
+            <button fd-button-grouped [size]="'xs'" (click)="setBulgarian()" [state]="isSelected('bg')">Bulgarian</button>
+        </fd-button-group>
+        <br>
+        <fd-date-picker [(ngModel)]="date" [startingDayOfWeek]="2"></fd-date-picker>
+        `,
 
     // Note that this can be provided in the root of your application.
     providers: [
@@ -71,6 +105,38 @@ export class CustomI18nLabels extends CalendarI18nLabels {
 })
 export class DatePickerI18nExampleComponent {
 
+    selected: number = 3;
+
+    constructor(private languageService: LanguageService) {
+    }
+
     date = FdDate.getToday();
 
+    isSelected(language: string) {
+        switch (language) {
+            case 'fr': {
+                return this.selected === 1 ? 'selected' : '';
+            }
+            case 'de': {
+                return this.selected === 2 ? 'selected' : '';
+            }
+            case 'bg': {
+                return this.selected === 3 ? 'selected' : '';
+            }
+        }
+    }
+
+    setGerman() {
+        this.selected = 2;
+        this.languageService.setLanguage('de');
+    }
+    setFrench() {
+        this.selected = 1;
+        this.languageService.setLanguage('fr');
+    }
+    setBulgarian() {
+        this.selected = 3;
+        this.languageService.setLanguage('bg');
+    }
+
 }

library/src/lib/calendar/calendar-views/calendar-day-view/calendar-day-view.component.ts

@@ -34,15 +34,9 @@ export class CalendarDayViewComponent implements OnInit, AfterViewChecked, OnCha
     /** @hidden */
     newFocusedDayId: string = '';
 
-    /** @hidden */
-    shortWeekDays: string[];
-
     /** Actual day grid with previous/current/next month days */
     public dayViewGrid: CalendarDay[][];
 
-    /** An RxJS Subject that will kill the data stream upon component’s destruction (for unsubscribing)  */
-    private readonly onDestroy$: Subject<void> = new Subject<void>();
-
     /** @hidden */
     @HostBinding('class.fd-calendar__dates')
     public fdCalendarDateViewClass: boolean = true;
@@ -95,7 +89,7 @@ export class CalendarDayViewComponent implements OnInit, AfterViewChecked, OnCha
      * @param fdDate FdDate
      */
     @Input()
-    disableFunction = function(fdDate: FdDate): boolean {
+    disableFunction = function (fdDate: FdDate): boolean {
         return false;
     };
 
@@ -104,7 +98,7 @@ export class CalendarDayViewComponent implements OnInit, AfterViewChecked, OnCha
      * @param fdDate FdDate
      */
     @Input()
-    disableRangeStartFunction = function(fdDate: FdDate): boolean {
+    disableRangeStartFunction = function (fdDate: FdDate): boolean {
         return false;
     };
 
@@ -113,7 +107,7 @@ export class CalendarDayViewComponent implements OnInit, AfterViewChecked, OnCha
      * @param fdDate FdDate
      */
     @Input()
-    disableRangeEndFunction = function(fdDate: FdDate): boolean {
+    disableRangeEndFunction = function (fdDate: FdDate): boolean {
         return false;
     };
 
@@ -122,7 +116,7 @@ export class CalendarDayViewComponent implements OnInit, AfterViewChecked, OnCha
      * @param fdDate FdDate
      */
     @Input()
-    blockRangeStartFunction = function(fdDate: FdDate): boolean {
+    blockRangeStartFunction = function (fdDate: FdDate): boolean {
         return false;
     };
 
@@ -131,7 +125,7 @@ export class CalendarDayViewComponent implements OnInit, AfterViewChecked, OnCha
      * @param fdDate FdDate
      */
     @Input()
-    blockRangeEndFunction = function(fdDate: FdDate): boolean {
+    blockRangeEndFunction = function (fdDate: FdDate): boolean {
         return false;
     };
 
@@ -140,7 +134,7 @@ export class CalendarDayViewComponent implements OnInit, AfterViewChecked, OnCha
      * @param fdDate FdDate
      */
     @Input()
-    blockFunction = function(fdDate: FdDate): boolean {
+    blockFunction = function (fdDate: FdDate): boolean {
         return false;
     };
 
@@ -193,11 +187,6 @@ export class CalendarDayViewComponent implements OnInit, AfterViewChecked, OnCha
     /** @hidden */
     ngOnInit(): void {
         this.buildDayViewGrid();
-        this.shortWeekDays = this.getShortWeekDays();
-        this.calendarI18n.i18nChange
-            .pipe(takeUntil(this.onDestroy$))
-            .subscribe(() => this.shortWeekDays = this.getShortWeekDays())
-        ;
     }
 
     /** @hidden
@@ -235,14 +224,14 @@ export class CalendarDayViewComponent implements OnInit, AfterViewChecked, OnCha
             }
         } else {
             switch (event.code) {
-                case('Space'):
-                case('Enter'): {
+                case ('Space'):
+                case ('Enter'): {
                     event.preventDefault();
                     this.selectDate(cell);
                     this.newFocusedDayId = cell.id;
                     break;
                 }
-                case('ArrowUp'): {
+                case ('ArrowUp'): {
                     event.preventDefault();
                     if (grid.y > 0) {
                         this.newFocusedDayId = this.dayViewGrid[grid.y - 1][grid.x].id;
@@ -252,7 +241,7 @@ export class CalendarDayViewComponent implements OnInit, AfterViewChecked, OnCha
                     }
                     break;
                 }
-                case('ArrowDown'): {
+                case ('ArrowDown'): {
                     event.preventDefault();
                     if (grid.y < this.dayViewGrid.length - 1) {
                         this.newFocusedDayId = this.dayViewGrid[grid.y + 1][grid.x].id;
@@ -262,7 +251,7 @@ export class CalendarDayViewComponent implements OnInit, AfterViewChecked, OnCha
                     }
                     break;
                 }
-                case('ArrowLeft'): {
+                case ('ArrowLeft'): {
                     event.preventDefault();
                     if (grid.x > 0) {
                         this.newFocusedDayId = this.dayViewGrid[grid.y][grid.x - 1].id;
@@ -272,11 +261,11 @@ export class CalendarDayViewComponent implements OnInit, AfterViewChecked, OnCha
                         this.selectPreviousMonth();
                         this.newFocusedDayId =
                             this.dayViewGrid[this.dayViewGrid.length - 1][this.dayViewGrid[0].length - 1].id
-                        ;
+                            ;
                     }
                     break;
                 }
-                case('ArrowRight'): {
+                case ('ArrowRight'): {
                     event.preventDefault();
                     if (grid.x < this.dayViewGrid[0].length - 1) {
                         this.newFocusedDayId = this.dayViewGrid[grid.y][grid.x + 1].id;
@@ -537,7 +526,7 @@ export class CalendarDayViewComponent implements OnInit, AfterViewChecked, OnCha
      * Method that returns first letter of every weekday, basing on CalendarI18nDefault. Can be changed by user by
      * providing other class which implements CalendarI18n
      */
-    private getShortWeekDays(): string[] {
+    get shortWeekDays(): string[] {
         return this.calendarI18n.getAllShortWeekdays()
             .slice(this.startingDayOfWeek - 1)
             .concat(this.calendarI18n.getAllShortWeekdays().slice(0, this.startingDayOfWeek - 1))

library/src/lib/calendar/calendar-views/calendar-month-view/calendar-month-view.component.html

@@ -1,7 +1,7 @@
 <div class="fd-calendar__months">
     <ul class="fd-calendar__list">
         <li class="fd-calendar__item"
-            *ngFor="let month of monthNames; let i = index"
+            *ngFor="let month of shortMonthNames; let i = index"
             [ngClass]="{
                 'fd-calendar__item--current': i + monthOffset === currentMonth,
                 'is-selected': i + monthOffset === monthSelected

library/src/lib/calendar/calendar-views/calendar-month-view/calendar-month-view.component.spec.ts

@@ -31,8 +31,8 @@ describe('Calendar2MonthViewComponent', () => {
     });
 
     it('Should have 12 months', () => {
-        expect(component.monthNames).toBeDefined();
-        expect(component.monthNames.length).toBe(12);
+        expect(component.shortMonthNames).toBeDefined();
+        expect(component.shortMonthNames.length).toBe(12);
     });
 
     it('Should trigger a click event', () => {

library/src/lib/calendar/calendar-views/calendar-month-view/calendar-month-view.component.ts

@@ -17,9 +17,6 @@ import { CalendarService } from '../../calendar.service';
 })
 export class CalendarMonthViewComponent implements OnInit, OnDestroy {
 
-    /** A list of month names (short names) */
-    monthNames: string[];
-
     /** A number offset used to achieve the 1-12 representation of the calendar */
     private readonly _monthOffset: number = 1;
 
@@ -51,16 +48,6 @@ export class CalendarMonthViewComponent implements OnInit, OnDestroy {
 
     /** @hidden */
     ngOnInit(): void {
-        this.monthNames = this.calendarI18n.getAllShortMonthNames();
-
-        this.calendarI18n.i18nChange
-            .pipe(takeUntil(this.onDestroy$))
-            .subscribe(() => {
-                this.monthNames = this.calendarI18n.getAllShortMonthNames();
-                this.cdRef.detectChanges();
-            })
-        ;
-
         this.calendarService.focusEscapeFunction = this.focusEscapeFunction;
 
         this.calendarService.onFocusIdChange
@@ -111,4 +98,9 @@ export class CalendarMonthViewComponent implements OnInit, OnDestroy {
             elementToFocus.focus();
         }
     }
+
+    /** Method that returns list of short month names from currently provided calendarI18n service */
+    get shortMonthNames(): string[] {
+        return this.calendarI18n.getAllShortMonthNames();
+    }
 }

library/src/lib/calendar/i18n/calendar-i18n.ts

@@ -16,12 +16,8 @@ export function CALENDAR_I18N_FACTORY(locale) {
 })
 export abstract class CalendarI18n {
 
-    /** Stream to call if the values are changed dynamically. Calendar subscribes to this internally. */
-    readonly i18nChange: Subject<void> = new Subject<void>();
-
     /**
      * Aria label for a specific date.
-     *
      * @param date Native date object to use for the label.
      */
     abstract getDayAriaLabel(date: Date): string;