use ng-bootstrap date selector, with proper formatting/parsing according to the current locale #177

src-ui/src/app/utils/ngb-date-adapter.ts

@@ -0,0 +1,23 @@
+import { Injectable } from "@angular/core";
+import { NgbDateAdapter, NgbDateStruct } from "@ng-bootstrap/ng-bootstrap";
+
+@Injectable()
+export class ISODateAdapter extends NgbDateAdapter<string> {
+
+  fromModel(value: string | null): NgbDateStruct | null {
+    if (value) {
+      let date = new Date(value)
+      return {
+        day : date.getDate(),
+        month : date.getMonth() + 1,
+        year : date.getFullYear()
+      }
+    } else {
+      return null
+    }
+  }
+
+  toModel(date: NgbDateStruct | null): string | null {
+    return date ? new Date(date.year, date.month - 1, date.day).toISOString() : null
+  }
+}

src-ui/src/app/utils/ngb-date-parser-formatter.ts

@@ -0,0 +1,59 @@
+import { Injectable } from "@angular/core"
+import { NgbDateParserFormatter, NgbDateStruct } from "@ng-bootstrap/ng-bootstrap"
+import { SettingsService } from "../services/settings.service"
+
+@Injectable()
+export class LocalizedDateParserFormatter extends NgbDateParserFormatter {
+
+  constructor(private settings: SettingsService) {
+    super()
+  }
+
+  private getDateInputFormat() {
+    return this.settings.getLocalizedDateInputFormat()
+  }
+
+  /**
+   * This constructs a regular expression from a date input format which is then
+   * used to parse dates.
+   */
+  private getDateParseRegex() {
+    return new RegExp(
+      "^" + this.getDateInputFormat()
+      .replace('dd', '(?<day>[0-9]+)')
+      .replace('mm', '(?<month>[0-9]+)')
+      .replace('yyyy', '(?<year>[0-9]+)')
+      .split('.').join('\\.\\s*') + "$" // allow whitespace(s) after dot (specific for German)
+      )
+  }
+
+  parse(value: string): NgbDateStruct | null {
+    let match = this.getDateParseRegex().exec(value)
+    if (match) {
+      let dateStruct = {
+        day: +match.groups.day,
+        month: +match.groups.month,
+        year: +match.groups.year
+      }
+      if (dateStruct.year <= (new Date().getFullYear() - 2000)) {
+        dateStruct.year += 2000
+      } else if (dateStruct.year < 100) {
+        dateStruct.year += 1900
+      }
+      return dateStruct
+    } else {
+      return null
+    }
+  }
+
+  format(date: NgbDateStruct | null): string {
+    if (date) {
+      return this.getDateInputFormat()
+      .replace('dd', date.day.toString().padStart(2, '0'))
+      .replace('mm', date.month.toString().padStart(2, '0'))
+      .replace('yyyy', date.year.toString().padStart(4, '0'))
+    } else {
+      return null
+    }
+  }
+}