fix(limel-date-picker): translate based on language property

fix #241
Lundalogik · Sep 10, 2019 · 677fad7 · 677fad7
1 parent b902f5c
commit 677fad7
Show file tree

Hide file tree

Showing 10 changed files with 82 additions and 33 deletions.
diff --git a/src/components/date-picker/date-picker.tsx b/src/components/date-picker/date-picker.tsx
@@ -8,7 +8,7 @@ import {
 } from '@stencil/core';
 
 import { Translations } from '../../global/translations';
-import { DateType } from './date-type';
+import { DateType, Languages } from './date-type';
 import { DatePicker as DateDatePicker } from './pickers/DatePicker';
 import { DatetimePicker } from './pickers/DatetimePicker';
 import { MonthPicker } from './pickers/MonthPicker';
@@ -70,6 +70,13 @@ export class DatePicker {
     @Prop()
     public format: string;
 
+    /**
+     * Defines the localisation for translations and date formatting.
+     * Property `format` customizes the localized date format.
+     */
+    @Prop()
+    public language: Languages = 'en';
+
     @Prop({ context: 'translations' })
     public translate: Translations;
 
@@ -90,20 +97,33 @@ export class DatePicker {
     public componentWillLoad() {
         switch (this.type) {
             case 'date':
-                this.picker = new DateDatePicker(this.format, this.change);
+                this.picker = new DateDatePicker(
+                    this.format,
+                    this.language,
+                    this.change
+                );
                 break;
 
             case 'time':
-                this.picker = new TimePicker(this.format, this.change);
+                this.picker = new TimePicker(
+                    this.format,
+                    this.language,
+                    this.change
+                );
                 break;
 
             case 'week':
-                this.picker = new WeekPicker(this.format, this.change);
+                this.picker = new WeekPicker(
+                    this.format,
+                    this.language,
+                    this.change
+                );
                 break;
 
             case 'month':
                 this.picker = new MonthPicker(
                     this.format,
+                    this.language,
                     this.change,
                     this.translate
                 );
@@ -112,21 +132,27 @@ export class DatePicker {
             case 'quarter':
                 this.picker = new QuarterPicker(
                     this.format,
+                    this.language,
                     this.change,
                     this.translate
                 );
                 break;
             case 'year':
                 this.picker = new YearPicker(
                     this.format,
+                    this.language,
                     this.change,
                     this.translate
                 );
                 break;
 
             case 'datetime':
             default:
-                this.picker = new DatetimePicker(this.format, this.change);
+                this.picker = new DatetimePicker(
+                    this.format,
+                    this.language,
+                    this.change
+                );
                 break;
         }
     }

diff --git a/src/components/date-picker/date-type.ts b/src/components/date-picker/date-type.ts
@@ -6,3 +6,5 @@ export type DateType =
     | 'month'
     | 'quarter'
     | 'year';
+
+export type Languages = 'en' | 'sv' | 'no' | 'fi' | 'da';
diff --git a/src/components/date-picker/pickers/DatePicker.ts b/src/components/date-picker/pickers/DatePicker.ts
@@ -3,8 +3,12 @@ import { BaseOptions } from 'flatpickr/dist/types/options';
 import { Picker } from './Picker';
 
 export class DatePicker extends Picker {
-    public constructor(dateFormat: string = 'L', change: EventEmitter) {
-        super(dateFormat, change);
+    public constructor(
+        dateFormat: string = 'L',
+        language: string,
+        change: EventEmitter
+    ) {
+        super(dateFormat, language, change);
     }
 
     public getConfig(nativePicker: boolean): Partial<BaseOptions> {

diff --git a/src/components/date-picker/pickers/DatetimePicker.ts b/src/components/date-picker/pickers/DatetimePicker.ts
@@ -3,8 +3,12 @@ import { BaseOptions } from 'flatpickr/dist/types/options';
 import { Picker } from './Picker';
 
 export class DatetimePicker extends Picker {
-    public constructor(dateFormat: string = 'L - LT', change: EventEmitter) {
-        super(dateFormat, change);
+    public constructor(
+        dateFormat: string = 'L - LT',
+        language: string,
+        change: EventEmitter
+    ) {
+        super(dateFormat, language, change);
     }
 
     public getConfig(nativePicker: boolean): Partial<BaseOptions> {

diff --git a/src/components/date-picker/pickers/MonthPicker.tsx b/src/components/date-picker/pickers/MonthPicker.tsx
@@ -14,10 +14,11 @@ export class MonthPicker extends Picker {
 
     public constructor(
         dateFormat: string = 'MM/YYYY',
+        language: string,
         change: EventEmitter,
         private translations: Translations
     ) {
-        super(dateFormat, change);
+        super(dateFormat, language, change);
         this.handleChange = this.handleChange.bind(this);
         this.handleReady = this.handleReady.bind(this);
         this.handleOpen = this.handleOpen.bind(this);
@@ -87,12 +88,9 @@ export class MonthPicker extends Picker {
     }
 
     private getLocalizedHeading() {
-        const languageCodeDash = navigator.language.indexOf('-');
-        const languageCodeLength =
-            languageCodeDash > 0 ? languageCodeDash : navigator.language.length;
         return this.translations.get(
             'date-picker.month.heading',
-            navigator.language.substring(0, languageCodeLength)
+            this.language
         );
     }
 

diff --git a/src/components/date-picker/pickers/Picker.ts b/src/components/date-picker/pickers/Picker.ts
@@ -1,18 +1,28 @@
 import { EventEmitter } from '@stencil/core';
 import flatpickr from 'flatpickr';
+import FlatpickrLanguages from 'flatpickr/dist/l10n';
 import { Instance } from 'flatpickr/dist/types/instance';
 import { BaseOptions } from 'flatpickr/dist/types/options';
+import 'moment/locale/da';
+import 'moment/locale/fi';
+import 'moment/locale/nb';
+import 'moment/locale/sv';
 import moment from 'moment/moment';
 import { isAndroidDevice, isIOSDevice } from '../../../util/device';
 
 export abstract class Picker {
     protected dateFormat: string;
+    protected language: string = 'en';
 
     protected flatpickr: Instance;
-
     private nativePicker;
 
-    public constructor(dateFormat: string, protected change: EventEmitter) {
+    public constructor(
+        dateFormat: string,
+        language: string,
+        protected change: EventEmitter
+    ) {
+        this.language = language;
         const isMobile = isIOSDevice() || isAndroidDevice();
         this.nativePicker = isMobile;
 
@@ -35,6 +45,7 @@ export abstract class Picker {
             parseDate: this.nativePicker ? undefined : this.parseDate,
             appendTo: container,
             defaultDate: value,
+            locale: FlatpickrLanguages[this.language] || 'en',
         };
 
         config = { ...config, ...this.getConfig(this.nativePicker) };
@@ -53,7 +64,9 @@ export abstract class Picker {
 
     public formatDate(date: Date) {
         if (date) {
-            return moment(date).format(this.dateFormat);
+            return moment(date)
+                .locale(this.getMomentLang())
+                .format(this.dateFormat);
         }
         return '';
     }
@@ -65,6 +78,10 @@ export abstract class Picker {
         this.change.emit(date);
     }
 
+    private getMomentLang() {
+        return this.language === 'no' ? 'nb' : this.language;
+    }
+
     private getWeek(date) {
         return moment(date).isoWeek();
     }

diff --git a/src/components/date-picker/pickers/QuarterPicker.tsx b/src/components/date-picker/pickers/QuarterPicker.tsx
@@ -15,10 +15,11 @@ export class QuarterPicker extends Picker {
 
     public constructor(
         dateFormat: string = '[Q]Q YYYY',
+        language: string,
         protected change: EventEmitter,
         private translations: Translations
     ) {
-        super(dateFormat, change);
+        super(dateFormat, language, change);
         this.handleChange = this.handleChange.bind(this);
         this.handleReady = this.handleReady.bind(this);
         this.handleOpen = this.handleOpen.bind(this);
@@ -92,12 +93,9 @@ export class QuarterPicker extends Picker {
     }
 
     private getLocalizedHeading() {
-        const languageCodeDash = navigator.language.indexOf('-');
-        const languageCodeLength =
-            languageCodeDash > 0 ? languageCodeDash : navigator.language.length;
         return this.translations.get(
             'date-picker.quarter.heading',
-            navigator.language.substring(0, languageCodeLength)
+            this.language
         );
     }
 

diff --git a/src/components/date-picker/pickers/TimePicker.ts b/src/components/date-picker/pickers/TimePicker.ts
@@ -3,8 +3,12 @@ import { BaseOptions } from 'flatpickr/dist/types/options';
 import { Picker } from './Picker';
 
 export class TimePicker extends Picker {
-    public constructor(dateFormat: string = 'LT', change: EventEmitter) {
-        super(dateFormat, change);
+    public constructor(
+        dateFormat: string = 'LT',
+        language: string,
+        change: EventEmitter
+    ) {
+        super(dateFormat, language, change);
     }
 
     public getConfig(): Partial<BaseOptions> {

diff --git a/src/components/date-picker/pickers/WeekPicker.ts b/src/components/date-picker/pickers/WeekPicker.ts
@@ -6,9 +6,10 @@ import { Picker } from './Picker';
 export class WeekPicker extends Picker {
     public constructor(
         dateFormat: string = '[w] W GGGG',
+        language: string,
         change: EventEmitter
     ) {
-        super(dateFormat, change);
+        super(dateFormat, language, change);
     }
 
     public getConfig(nativePicker: boolean): Partial<BaseOptions> {

diff --git a/src/components/date-picker/pickers/YearPicker.tsx b/src/components/date-picker/pickers/YearPicker.tsx
@@ -12,10 +12,11 @@ export class YearPicker extends Picker {
 
     public constructor(
         dateFormat: string = 'YYYY',
+        language: string,
         change: EventEmitter,
         private translations: Translations
     ) {
-        super(dateFormat, change);
+        super(dateFormat, language, change);
         this.handleChange = this.handleChange.bind(this);
         this.handleReady = this.handleReady.bind(this);
     }
@@ -61,13 +62,7 @@ export class YearPicker extends Picker {
     }
 
     private getLocalizedHeading() {
-        const languageCodeDash = navigator.language.indexOf('-');
-        const languageCodeLength =
-            languageCodeDash > 0 ? languageCodeDash : navigator.language.length;
-        return this.translations.get(
-            'date-picker.year.heading',
-            navigator.language.substring(0, languageCodeLength)
-        );
+        return this.translations.get('date-picker.year.heading', this.language);
     }
 
     private renderYearPicker(fp): any {