Replace <WuDatepicker> with <AuDatePicker>

app/components/date-time-picker.hbs

@@ -1,14 +1,25 @@
 <div class="au-o-grid au-o-grid--small">
   <div class="au-o-grid__item au-u-2-6">
-    <AuLabel>Datum</AuLabel>
-    <WuDatepicker class="au-c-datepicker" @onChange={{this.onChangeDate}} @value={{this.date}}/>
+    {{#let (unique-id) as |id|}}
+      <AuLabel for={{id}}>Datum</AuLabel>
+      <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">
-    <AuLabel>Uur</AuLabel>
-    <Input class="au-c-input au-c-input--block" type='number' @input={{fn this.onChangeTime 'hours'}} @value={{this.hours}} max={{24}} />
+    {{#let (unique-id) as |id|}}
+      <AuLabel for={{id}}>Uur</AuLabel>
+      <Input class="au-c-input au-c-input--block" type='number' @input={{fn this.onChangeTime 'hours'}} @value={{this.hours}} max={{24}} id={{id}} />
+    {{/let}}
   </div>
   <div class="au-o-grid__item au-u-2-6 au-u-1-6@medium">
-    <AuLabel>Minuten</AuLabel>
-    <Input class="au-c-input au-c-input--block" type='number' @input={{fn this.onChangeTime 'minutes'}} @value={{this.minutes}} max={{60}} />
+    {{#let (unique-id) as |id|}}
+      <AuLabel for={{id}}>Minuten</AuLabel>
+      <Input class="au-c-input au-c-input--block" type='number' @input={{fn this.onChangeTime 'minutes'}} @value={{this.minutes}} max={{60}} id={{id}} />
+    {{/let}}
   </div>
 </div>

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;
@@ -14,16 +16,38 @@ export default class DateTimePicker extends Component{
       this.minutes = this.date.getMinutes();
     }
   }
+
+  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(date) {
-    if(!this.date) {
-      this.date = new Date();
+  onChangeDate(isoDate, date) {
+    let wasDateInputCleared = !date;
+    if (!wasDateInputCleared) {
+      if(!this.date) {
+        this.date = new Date();
+      }
+      this.date.setDate(date.getDate());
+      this.date.setMonth(date.getMonth());
+      this.date.setFullYear(date.getFullYear());
+      this.args.onChange(this.date);
     }
-    this.date.setDate(date.getDate());
-    this.date.setMonth(date.getMonth());
-    this.date.setFullYear(date.getFullYear());
-    this.args.onChange(this.date);
   }
+
   @action
   onChangeTime(type, event) {
     const value = event.target.value;
@@ -40,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 });
+    });
+}

app/styles/app.scss

@@ -56,7 +56,7 @@
 
 // WU COMPONENTS (DEPRECATED)
 @import 'ember-vo-webuniversum';
-@import 'ember-vo-webuniversum-data-table';
+// @import 'ember-vo-webuniversum-data-table'; // This imports the ember-data-table styles which make <duet-date-picker> not render correctly
 @import 'ember-power-select';
 
 

app/styles/project/_c-meeting-chrome.scss

@@ -255,6 +255,7 @@
   td {
     max-width: 55ch;
     position: relative;
+    vertical-align: middle;
   }
 
   th.is-selectable,

package.json

@@ -84,7 +84,7 @@
     "ember-export-application-global": "^2.0.1",
     "ember-feature-flags": "^6.0.0",
     "ember-fetch": "^8.0.2",
-    "ember-intl": "^4.3.0",
+    "ember-intl": "^5.6.2",
     "ember-load": "0.0.17",
     "ember-load-initializers": "^2.1.2",
     "ember-maybe-import-regenerator": "^0.1.6",

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"

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"