Add translations to the date picker

lblod · Apr 29, 2021 · 4f68659 · 4f68659
1 parent f4c084e
commit 4f68659
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 1 deletion.
diff --git a/app/components/date-time-picker.hbs b/app/components/date-time-picker.hbs
@@ -2,7 +2,12 @@
   <div class="au-o-grid__item au-u-2-6">
     {{#let (unique-id) as |id|}}
       <AuLabel for={{id}}>Datum</AuLabel>
-      <AuDatePicker @id={{id}} @onChange={{this.onChangeDate}} @value={{this.date}} />
+      <AuDatePicker
+        @id={{id}}
+        @onChange={{this.onChangeDate}}
+        @value={{this.date}}
+        @localization={{this.datePickerLocalization}}
+      />
     {{/let}}
   </div>
   <div class="au-o-grid__item au-u-2-6 au-u-1-6@medium">

diff --git a/app/components/date-time-picker.js b/app/components/date-time-picker.js
@@ -1,7 +1,9 @@
 import Component from '@glimmer/component';
 import { action } from "@ember/object";
+import { inject as service } from '@ember/service';
 
 export default class DateTimePicker extends Component{
+  @service intl;
   date;
   hours;
   minutes;
@@ -15,6 +17,23 @@ export default class DateTimePicker extends Component{
     }
   }
 
+  get datePickerLocalization() {
+    return {
+      buttonLabel: this.intl.t('auDatePicker.buttonLabel'),
+      selectedDateMessage: this.intl.t('auDatePicker.selectedDateMessage'),
+      prevMonthLabel: this.intl.t('auDatePicker.prevMonthLabel'),
+      nextMonthLabel: this.intl.t('auDatePicker.nextMonthLabel'),
+      monthSelectLabel: this.intl.t('auDatePicker.monthSelectLabel'),
+      yearSelectLabel: this.intl.t('auDatePicker.yearSelectLabel'),
+      closeLabel: this.intl.t('auDatePicker.closeLabel'),
+      keyboardInstruction: this.intl.t('auDatePicker.keyboardInstruction'),
+      calendarHeading: this.intl.t('auDatePicker.calendarHeading'),
+      dayNames: getLocalizedDays(this.intl),
+      monthNames: getLocalizedMonths(this.intl),
+      monthNamesShort: getLocalizedMonths(this.intl, 'short'),
+    };
+  }
+
   @action
   onChangeDate(isoDate, date) {
     let wasDateInputCleared = !date;
@@ -45,3 +64,22 @@ export default class DateTimePicker extends Component{
     this.args.onChange(this.date);
   }
 }
+
+function getLocalizedMonths(intl, monthFormat = 'long') {
+  let someYear = 2021;
+  return [...Array(12).keys()]
+    .map((monthIndex) => {
+      let date = new Date(someYear, monthIndex);
+      return intl.formatDate(date, { month: monthFormat });
+    });
+}
+
+function getLocalizedDays(intl, weekdayFormat = 'long') {
+  let someSunday = new Date('2021-01-03');
+  return [...Array(7).keys()]
+    .map((index) => {
+      let weekday = new Date(someSunday.getTime());
+      weekday.setDate(someSunday.getDate() + index);
+      return intl.formatDate(weekday, { weekday: weekdayFormat });
+    });
+}
diff --git a/translations/appuniversum/en-us.yaml b/translations/appuniversum/en-us.yaml
@@ -0,0 +1,10 @@
+auDatePicker:
+  buttonLabel: "Choose a date"
+  selectedDateMessage: "Selected date is"
+  prevMonthLabel: "Previous month"
+  nextMonthLabel: "Next month"
+  monthSelectLabel: "Month"
+  yearSelectLabel: "Year"
+  closeLabel: "Close windows"
+  keyboardInstruction: "You can use arrow keys to navigate dates"
+  calendarHeading: "Choose a date"
diff --git a/translations/appuniversum/nl-be.yaml b/translations/appuniversum/nl-be.yaml
@@ -0,0 +1,10 @@
+auDatePicker:
+  buttonLabel: "Kies een datum"
+  selectedDateMessage: "De geselecteerde datum is"
+  prevMonthLabel: "Vorige maand"
+  nextMonthLabel: "Volgende maand"
+  monthSelectLabel: "Maand"
+  yearSelectLabel: "Jaar"
+  closeLabel: "Sluit venster"
+  keyboardInstruction: "Gebruik de pijltjestoetsen om te navigeren"
+  calendarHeading: "Kies een datum"