From 677fad719fe786d4959bdca40db5aaef034b0d17 Mon Sep 17 00:00:00 2001 From: Katja Bregenzer Date: Mon, 14 Jan 2019 10:42:22 +0100 Subject: [PATCH] fix(limel-date-picker): translate based on language property fix #241 --- src/components/date-picker/date-picker.tsx | 36 ++++++++++++++++--- src/components/date-picker/date-type.ts | 2 ++ .../date-picker/pickers/DatePicker.ts | 8 +++-- .../date-picker/pickers/DatetimePicker.ts | 8 +++-- .../date-picker/pickers/MonthPicker.tsx | 8 ++--- src/components/date-picker/pickers/Picker.ts | 23 ++++++++++-- .../date-picker/pickers/QuarterPicker.tsx | 8 ++--- .../date-picker/pickers/TimePicker.ts | 8 +++-- .../date-picker/pickers/WeekPicker.ts | 3 +- .../date-picker/pickers/YearPicker.tsx | 11 ++---- 10 files changed, 82 insertions(+), 33 deletions(-) diff --git a/src/components/date-picker/date-picker.tsx b/src/components/date-picker/date-picker.tsx index 7f59c47345..06ce08b2cd 100644 --- 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,6 +132,7 @@ export class DatePicker { case 'quarter': this.picker = new QuarterPicker( this.format, + this.language, this.change, this.translate ); @@ -119,6 +140,7 @@ export class DatePicker { case 'year': this.picker = new YearPicker( this.format, + this.language, this.change, this.translate ); @@ -126,7 +148,11 @@ export class DatePicker { 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 index f65f28b065..65c68cbbb6 100644 --- 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 index 32b610ce3b..ad544584bb 100644 --- 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 { diff --git a/src/components/date-picker/pickers/DatetimePicker.ts b/src/components/date-picker/pickers/DatetimePicker.ts index ed6f562d58..323057edd7 100644 --- 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 { diff --git a/src/components/date-picker/pickers/MonthPicker.tsx b/src/components/date-picker/pickers/MonthPicker.tsx index f64443cb34..cdf3da928d 100644 --- 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 index ce8feb7ddc..af7ee22c83 100644 --- 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 index 1c572d1f8e..55524eb092 100644 --- 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 index 60554cf7be..3befdb72bd 100644 --- 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 { diff --git a/src/components/date-picker/pickers/WeekPicker.ts b/src/components/date-picker/pickers/WeekPicker.ts index 8c7c4ac9fc..caa158b8fa 100644 --- 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 { diff --git a/src/components/date-picker/pickers/YearPicker.tsx b/src/components/date-picker/pickers/YearPicker.tsx index 13bb79eb4a..4b2fa9ec64 100644 --- 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 {