From 0f886be109670c59c504dca543785dabde97bbcb Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Thu, 10 Mar 2022 14:27:45 -0800
Subject: [PATCH 01/13] semicolon

---
 src-ui/src/app/utils/ngb-date-parser-formatter.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-ui/src/app/utils/ngb-date-parser-formatter.ts b/src-ui/src/app/utils/ngb-date-parser-formatter.ts
index ceb773f9f..ae3ce0e5d 100644
--- a/src-ui/src/app/utils/ngb-date-parser-formatter.ts
+++ b/src-ui/src/app/utils/ngb-date-parser-formatter.ts
@@ -87,7 +87,7 @@ export class LocalizedDateParserFormatter extends NgbDateParserFormatter {
   }
 
   parse(value: string): NgbDateStruct | null {
-    value = this.preformatDateInput(value);
+    value = this.preformatDateInput(value)
     let match = this.getDateParseRegex().exec(value)
     if (match) {
       let dateStruct = {

From ef4dc1b49ef177d538b5a3c0b3effb6f3fc639da Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Thu, 10 Mar 2022 14:27:54 -0800
Subject: [PATCH 02/13] strip all delimiters

---
 src-ui/src/app/utils/ngb-date-parser-formatter.ts | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src-ui/src/app/utils/ngb-date-parser-formatter.ts b/src-ui/src/app/utils/ngb-date-parser-formatter.ts
index ae3ce0e5d..b78dbd190 100644
--- a/src-ui/src/app/utils/ngb-date-parser-formatter.ts
+++ b/src-ui/src/app/utils/ngb-date-parser-formatter.ts
@@ -35,16 +35,14 @@ export class LocalizedDateParserFormatter extends NgbDateParserFormatter {
    * have it expanded to 10.03.2022, in the case of the German format.
    * (All other formats are also supported)
    * 
-   * It also replaces commas with the date separator. 
-   * This allows quick entry of the date on the numpad. 
+   * It also strips commas or periods before running formatting, 
+   * which allows quick entry of the date on the numpad. 
    */
   private preformatDateInput(value: string): string {
     let inputFormat = this.getDateInputFormat()
     let dateSeparator = inputFormat.replace(/[dmy]/gi, '').charAt(0)
 
-    value = value.replace(/,/g, dateSeparator)
-
-    if (value.includes(dateSeparator)) { return value }
+    value = value.replace(/[\/,\.-]/g, '')
 
     if (value.length == 4 && inputFormat.substring(0, 4) != 'yyyy') {
       return value.substring(0, 2)

From a33dce194828641d1380d117a12e8987927ab894 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Thu, 10 Mar 2022 14:41:26 -0800
Subject: [PATCH 03/13] Code formatting

---
 .../app/utils/ngb-date-parser-formatter.ts    | 45 +++++--------------
 1 file changed, 10 insertions(+), 35 deletions(-)

diff --git a/src-ui/src/app/utils/ngb-date-parser-formatter.ts b/src-ui/src/app/utils/ngb-date-parser-formatter.ts
index b78dbd190..da5740f00 100644
--- a/src-ui/src/app/utils/ngb-date-parser-formatter.ts
+++ b/src-ui/src/app/utils/ngb-date-parser-formatter.ts
@@ -45,41 +45,16 @@ export class LocalizedDateParserFormatter extends NgbDateParserFormatter {
     value = value.replace(/[\/,\.-]/g, '')
 
     if (value.length == 4 && inputFormat.substring(0, 4) != 'yyyy') {
-      return value.substring(0, 2)
-        + dateSeparator
-        + value.substring(2, 4)
-        + dateSeparator
-        + new Date().getFullYear()
-    }
-    else if (value.length == 4 && inputFormat.substring(0, 4) == 'yyyy') {
-      return new Date().getFullYear()
-        + dateSeparator
-        + value.substring(0, 2)
-        + dateSeparator
-        + value.substring(2, 4)
-    }
-    else if (value.length == 6) {
-      return value.substring(0, 2)
-        + dateSeparator
-        + value.substring(2, 4)
-        + dateSeparator
-        + value.substring(4, 6)
-    }
-    else if (value.length == 8 && inputFormat.substring(0, 4) != 'yyyy') {
-      return value.substring(0, 2)
-        + dateSeparator
-        + value.substring(2, 4)
-        + dateSeparator
-        + value.substring(4, 8)
-    }
-    else if (value.length == 8 && inputFormat.substring(0, 4) == 'yyyy') {
-      return value.substring(0, 4)
-        + dateSeparator
-        + value.substring(4, 6)
-        + dateSeparator
-        + value.substring(6, 8)
-    }
-    else {
+      return [value.substring(0, 2), value.substring(2, 4), new Date().getFullYear()].join(dateSeparator)
+    } else if (value.length == 4 && inputFormat.substring(0, 4) == 'yyyy') {
+      return [new Date().getFullYear(), value.substring(0, 2), value.substring(2, 4)].join(dateSeparator)
+    } else if (value.length == 6) {
+      return [value.substring(0, 2), value.substring(2, 4), value.substring(4, 6)].join(dateSeparator)
+    } else if (value.length == 8 && inputFormat.substring(0, 4) != 'yyyy') {
+      return [value.substring(0, 2), value.substring(2, 4), value.substring(4, 8)].join(dateSeparator)
+    } else if (value.length == 8 && inputFormat.substring(0, 4) == 'yyyy') {
+      return [value.substring(0, 4), value.substring(4, 6), value.substring(6, 8)].join(dateSeparator)
+    } else {
       return value
     }
   }

From 18078119039df986bb349277dad668c058b42ab0 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Thu, 10 Mar 2022 15:11:08 -0800
Subject: [PATCH 04/13] Allow formatting non-padded dates

---
 .../components/common/input/date/date.component.html  |  2 +-
 .../components/common/input/date/date.component.ts    | 11 +++++++++++
 src-ui/src/app/utils/ngb-date-parser-formatter.ts     |  2 +-
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src-ui/src/app/components/common/input/date/date.component.html b/src-ui/src/app/components/common/input/date/date.component.html
index 135bae411..b49993b20 100644
--- a/src-ui/src/app/components/common/input/date/date.component.html
+++ b/src-ui/src/app/components/common/input/date/date.component.html
@@ -1,7 +1,7 @@
 <div class="mb-3">
   <label class="form-label" [for]="inputId">{{title}}</label>
   <div class="input-group" [class.is-invalid]="error">
-    <input class="form-control" [class.is-invalid]="error"  [placeholder]="placeholder" [id]="inputId" (dateSelect)="onChange(value)" (change)="onChange(value)"
+    <input class="form-control" [class.is-invalid]="error" [placeholder]="placeholder" [id]="inputId" (dateSelect)="onChange(value)" (change)="onChange(value)" (focusout)="onFocusOut()"
            name="dp" [(ngModel)]="value" ngbDatepicker #datePicker="ngbDatepicker" #datePickerContent="ngModel">
     <button class="btn btn-outline-secondary calendar" (click)="datePicker.toggle()" type="button">
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
diff --git a/src-ui/src/app/components/common/input/date/date.component.ts b/src-ui/src/app/components/common/input/date/date.component.ts
index b3b863581..fd49193b3 100644
--- a/src-ui/src/app/components/common/input/date/date.component.ts
+++ b/src-ui/src/app/components/common/input/date/date.component.ts
@@ -2,6 +2,7 @@ import { Component, forwardRef, Input, OnInit, ViewChild } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NgbDateAdapter, NgbDateParserFormatter, NgbDatepickerContent } from '@ng-bootstrap/ng-bootstrap';
 import { SettingsService } from 'src/app/services/settings.service';
+import { LocalizedDateParserFormatter } from 'src/app/utils/ngb-date-parser-formatter';
 import { v4 as uuidv4 } from 'uuid';
 import { AbstractInputComponent } from '../abstract-input';
 
@@ -29,4 +30,14 @@ export class DateComponent extends AbstractInputComponent<string> implements OnI
 
   placeholder: string
 
+  // Allow dates to be specified without 'padding' e.g. 2/3
+  onFocusOut() {
+    if (!this.value || this.value.length > 8) return; // its already been formatted
+    if ([',','.','/','-'].some(sep => this.value.includes(sep))) {
+      let valArr = this.value.split(/[\.,\/-]+/)
+      valArr = valArr.map(segment => segment.padStart(2,'0'))
+      let dateFormatter = new LocalizedDateParserFormatter(this.settings)
+      this.value = dateFormatter.preformatDateInput(valArr.join(''))
+    }
+  }
 }
diff --git a/src-ui/src/app/utils/ngb-date-parser-formatter.ts b/src-ui/src/app/utils/ngb-date-parser-formatter.ts
index da5740f00..4f4c30f44 100644
--- a/src-ui/src/app/utils/ngb-date-parser-formatter.ts
+++ b/src-ui/src/app/utils/ngb-date-parser-formatter.ts
@@ -38,7 +38,7 @@ export class LocalizedDateParserFormatter extends NgbDateParserFormatter {
    * It also strips commas or periods before running formatting, 
    * which allows quick entry of the date on the numpad. 
    */
-  private preformatDateInput(value: string): string {
+  public preformatDateInput(value: string): string {
     let inputFormat = this.getDateInputFormat()
     let dateSeparator = inputFormat.replace(/[dmy]/gi, '').charAt(0)
 

From 0737ea30e85c8db81204efa3359bab6ab3e0ab99 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Thu, 10 Mar 2022 15:27:02 -0800
Subject: [PATCH 05/13] fix comment

---
 src-ui/src/app/utils/ngb-date-parser-formatter.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-ui/src/app/utils/ngb-date-parser-formatter.ts b/src-ui/src/app/utils/ngb-date-parser-formatter.ts
index 4f4c30f44..9920fddff 100644
--- a/src-ui/src/app/utils/ngb-date-parser-formatter.ts
+++ b/src-ui/src/app/utils/ngb-date-parser-formatter.ts
@@ -35,7 +35,7 @@ export class LocalizedDateParserFormatter extends NgbDateParserFormatter {
    * have it expanded to 10.03.2022, in the case of the German format.
    * (All other formats are also supported)
    * 
-   * It also strips commas or periods before running formatting, 
+   * It also strips any separators before running formatting, 
    * which allows quick entry of the date on the numpad. 
    */
   public preformatDateInput(value: string): string {

From af7ffa3878f2a600f0b119c50cf707adaf4605e8 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Thu, 10 Mar 2022 16:48:03 -0800
Subject: [PATCH 06/13] Allow date dropdowns to use new formatter

---
 .../date-dropdown.component.html              |  4 ++--
 .../date-dropdown/date-dropdown.component.ts  | 22 ++++++++++++++++++-
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
index 90cdc134e..2cb0749ac 100644
--- a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
+++ b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
@@ -20,7 +20,7 @@
           </div>
 
           <div class="input-group input-group-sm">
-            <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()"
+            <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (focusout)="onFocusOut()"
                     [(ngModel)]="dateAfter" ngbDatepicker #dateAfterPicker="ngbDatepicker">
             <button class="btn btn-outline-secondary" (click)="dateAfterPicker.toggle()" type="button">
               <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
@@ -43,7 +43,7 @@
           </div>
 
           <div class="input-group input-group-sm">
-            <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()"
+            <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (focusout)="onFocusOut()"
                     [(ngModel)]="dateBefore" ngbDatepicker #dateBeforePicker="ngbDatepicker">
             <button class="btn btn-outline-secondary" (click)="dateBeforePicker.toggle()" type="button">
               <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
diff --git a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
index e21b28312..9f74a49ad 100644
--- a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
+++ b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
@@ -4,6 +4,7 @@ import { NgbDateAdapter } from '@ng-bootstrap/ng-bootstrap';
 import { Subject, Subscription } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 import { SettingsService } from 'src/app/services/settings.service';
+import { LocalizedDateParserFormatter } from 'src/app/utils/ngb-date-parser-formatter';
 import { ISODateAdapter } from 'src/app/utils/ngb-iso-date-adapter';
 
 export interface DateSelection {
@@ -25,9 +26,11 @@ const LAST_YEAR = 3
   ]
 })
 export class DateDropdownComponent implements OnInit, OnDestroy {
+  private settings: SettingsService
 
   constructor(settings: SettingsService) {
-    this.datePlaceHolder = settings.getLocalizedDateInputFormat()
+    this.settings = settings
+    this.datePlaceHolder = this.settings.getLocalizedDateInputFormat()
   }
 
   quickFilters = [
@@ -110,6 +113,23 @@ export class DateDropdownComponent implements OnInit, OnDestroy {
     this.datesSetDebounce$.next({after: this.dateAfter, before: this.dateBefore})
   }
 
+  onFocusOut() {
+    this.dateAfter = this.maybePadString(this.dateAfter)
+    this.dateBefore = this.maybePadString(this.dateBefore)
+  }
+
+  maybePadString(value): string {
+    // Allow dates to be specified without 'padding' e.g. 2/3
+    if (!value || value.length == 10) return value; // null or already formatted
+    if ([',','.','/','-'].some(sep => value.includes(sep))) {
+      let valArr = value.split(/[\.,\/-]+/)
+      valArr = valArr.map(segment => segment.padStart(2,'0'))
+      let dateFormatter = new LocalizedDateParserFormatter(this.settings)
+      value = dateFormatter.preformatDateInput(valArr.join(''))
+    }
+    return value
+  }
+
   clearBefore() {
     this.dateBefore = null
     this.onChange()

From a1fd9f73105a6c6d4b61cd1c9a22cf3040c0dc2a Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Fri, 11 Mar 2022 00:11:59 -0800
Subject: [PATCH 07/13] Limit date input field chars and length

---
 .../common/date-dropdown/date-dropdown.component.html     | 8 ++++----
 .../common/date-dropdown/date-dropdown.component.ts       | 6 ++++++
 .../app/components/common/input/date/date.component.html  | 5 +++--
 .../app/components/common/input/date/date.component.ts    | 7 +++++++
 4 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
index 2cb0749ac..049b8f444 100644
--- a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
+++ b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
@@ -20,8 +20,8 @@
           </div>
 
           <div class="input-group input-group-sm">
-            <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (focusout)="onFocusOut()"
-                    [(ngModel)]="dateAfter" ngbDatepicker #dateAfterPicker="ngbDatepicker">
+            <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (focusout)="onFocusOut()" (keypress)="onKeyPress($event)"
+                    maxlength="10" [(ngModel)]="dateAfter" ngbDatepicker #dateAfterPicker="ngbDatepicker">
             <button class="btn btn-outline-secondary" (click)="dateAfterPicker.toggle()" type="button">
               <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
                 <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
@@ -43,8 +43,8 @@
           </div>
 
           <div class="input-group input-group-sm">
-            <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (focusout)="onFocusOut()"
-                    [(ngModel)]="dateBefore" ngbDatepicker #dateBeforePicker="ngbDatepicker">
+            <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (focusout)="onFocusOut()" (keypress)="onKeyPress($event)"
+                    maxlength="10" [(ngModel)]="dateBefore" ngbDatepicker #dateBeforePicker="ngbDatepicker">
             <button class="btn btn-outline-secondary" (click)="dateBeforePicker.toggle()" type="button">
               <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
                 <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
diff --git a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
index 9f74a49ad..91c81cf1f 100644
--- a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
+++ b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
@@ -140,4 +140,10 @@ export class DateDropdownComponent implements OnInit, OnDestroy {
     this.onChange()
   }
 
+  // prevent chars other than numbers and separators
+  onKeyPress(event: KeyboardEvent) {
+    if (!/[0-9,\.\/-]+/.test(event.key)) {
+      event.preventDefault();
+    }
+  }
 }
diff --git a/src-ui/src/app/components/common/input/date/date.component.html b/src-ui/src/app/components/common/input/date/date.component.html
index b49993b20..2647ca0ba 100644
--- a/src-ui/src/app/components/common/input/date/date.component.html
+++ b/src-ui/src/app/components/common/input/date/date.component.html
@@ -1,8 +1,9 @@
 <div class="mb-3">
   <label class="form-label" [for]="inputId">{{title}}</label>
   <div class="input-group" [class.is-invalid]="error">
-    <input class="form-control" [class.is-invalid]="error" [placeholder]="placeholder" [id]="inputId" (dateSelect)="onChange(value)" (change)="onChange(value)" (focusout)="onFocusOut()"
-           name="dp" [(ngModel)]="value" ngbDatepicker #datePicker="ngbDatepicker" #datePickerContent="ngModel">
+    <input class="form-control" [class.is-invalid]="error" [placeholder]="placeholder" [id]="inputId" maxlength="10"
+          (dateSelect)="onChange(value)" (change)="onChange(value)" (focusout)="onFocusOut()" (keypress)="onKeyPress($event)"
+          name="dp" [(ngModel)]="value" ngbDatepicker #datePicker="ngbDatepicker" #datePickerContent="ngModel">
     <button class="btn btn-outline-secondary calendar" (click)="datePicker.toggle()" type="button">
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
         <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
diff --git a/src-ui/src/app/components/common/input/date/date.component.ts b/src-ui/src/app/components/common/input/date/date.component.ts
index fd49193b3..f9e80568e 100644
--- a/src-ui/src/app/components/common/input/date/date.component.ts
+++ b/src-ui/src/app/components/common/input/date/date.component.ts
@@ -40,4 +40,11 @@ export class DateComponent extends AbstractInputComponent<string> implements OnI
       this.value = dateFormatter.preformatDateInput(valArr.join(''))
     }
   }
+
+  // prevent chars other than numbers and separators
+  onKeyPress(event: KeyboardEvent) {
+    if (!/[0-9,\.\/-]+/.test(event.key)) {
+      event.preventDefault();
+    }
+  }
 }

From 4c7eb342904b82794913007ce6ab9c957a2036de Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Fri, 11 Mar 2022 00:28:06 -0800
Subject: [PATCH 08/13] Move padding into date formatter

---
 .../common/input/date/date.component.html      |  2 +-
 .../common/input/date/date.component.ts        | 18 ++----------------
 .../src/app/utils/ngb-date-parser-formatter.ts |  6 +++++-
 3 files changed, 8 insertions(+), 18 deletions(-)

diff --git a/src-ui/src/app/components/common/input/date/date.component.html b/src-ui/src/app/components/common/input/date/date.component.html
index 2647ca0ba..ca6ec0b26 100644
--- a/src-ui/src/app/components/common/input/date/date.component.html
+++ b/src-ui/src/app/components/common/input/date/date.component.html
@@ -2,7 +2,7 @@
   <label class="form-label" [for]="inputId">{{title}}</label>
   <div class="input-group" [class.is-invalid]="error">
     <input class="form-control" [class.is-invalid]="error" [placeholder]="placeholder" [id]="inputId" maxlength="10"
-          (dateSelect)="onChange(value)" (change)="onChange(value)" (focusout)="onFocusOut()" (keypress)="onKeyPress($event)"
+          (dateSelect)="onChange(value)" (change)="onChange(value)" (keypress)="onKeyPress($event)"
           name="dp" [(ngModel)]="value" ngbDatepicker #datePicker="ngbDatepicker" #datePickerContent="ngModel">
     <button class="btn btn-outline-secondary calendar" (click)="datePicker.toggle()" type="button">
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
diff --git a/src-ui/src/app/components/common/input/date/date.component.ts b/src-ui/src/app/components/common/input/date/date.component.ts
index f9e80568e..061689d1a 100644
--- a/src-ui/src/app/components/common/input/date/date.component.ts
+++ b/src-ui/src/app/components/common/input/date/date.component.ts
@@ -1,9 +1,6 @@
-import { Component, forwardRef, Input, OnInit, ViewChild } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { NgbDateAdapter, NgbDateParserFormatter, NgbDatepickerContent } from '@ng-bootstrap/ng-bootstrap';
+import { Component, forwardRef, OnInit } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { SettingsService } from 'src/app/services/settings.service';
-import { LocalizedDateParserFormatter } from 'src/app/utils/ngb-date-parser-formatter';
-import { v4 as uuidv4 } from 'uuid';
 import { AbstractInputComponent } from '../abstract-input';
 
 
@@ -30,17 +27,6 @@ export class DateComponent extends AbstractInputComponent<string> implements OnI
 
   placeholder: string
 
-  // Allow dates to be specified without 'padding' e.g. 2/3
-  onFocusOut() {
-    if (!this.value || this.value.length > 8) return; // its already been formatted
-    if ([',','.','/','-'].some(sep => this.value.includes(sep))) {
-      let valArr = this.value.split(/[\.,\/-]+/)
-      valArr = valArr.map(segment => segment.padStart(2,'0'))
-      let dateFormatter = new LocalizedDateParserFormatter(this.settings)
-      this.value = dateFormatter.preformatDateInput(valArr.join(''))
-    }
-  }
-
   // prevent chars other than numbers and separators
   onKeyPress(event: KeyboardEvent) {
     if (!/[0-9,\.\/-]+/.test(event.key)) {
diff --git a/src-ui/src/app/utils/ngb-date-parser-formatter.ts b/src-ui/src/app/utils/ngb-date-parser-formatter.ts
index 9920fddff..90f338702 100644
--- a/src-ui/src/app/utils/ngb-date-parser-formatter.ts
+++ b/src-ui/src/app/utils/ngb-date-parser-formatter.ts
@@ -42,7 +42,11 @@ export class LocalizedDateParserFormatter extends NgbDateParserFormatter {
     let inputFormat = this.getDateInputFormat()
     let dateSeparator = inputFormat.replace(/[dmy]/gi, '').charAt(0)
 
-    value = value.replace(/[\/,\.-]/g, '')
+    if ([',','.','/','-'].some(sep => value.includes(sep))) {
+      let valArr = value.split(/[\.,\/-]+/)
+      valArr = valArr.map(segment => segment.padStart(2,'0'))
+      value = valArr.join('')
+    }    
 
     if (value.length == 4 && inputFormat.substring(0, 4) != 'yyyy') {
       return [value.substring(0, 2), value.substring(2, 4), new Date().getFullYear()].join(dateSeparator)

From ad87c3c87d529afed0ceeb3a17c5d80658a8e83a Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Fri, 11 Mar 2022 00:29:59 -0800
Subject: [PATCH 09/13] Fix dropdown inputs

---
 .../date-dropdown.component.html              |  4 ++--
 .../date-dropdown/date-dropdown.component.ts  | 22 +------------------
 2 files changed, 3 insertions(+), 23 deletions(-)

diff --git a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
index 049b8f444..6e5a7d928 100644
--- a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
+++ b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
@@ -20,7 +20,7 @@
           </div>
 
           <div class="input-group input-group-sm">
-            <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (focusout)="onFocusOut()" (keypress)="onKeyPress($event)"
+            <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
                     maxlength="10" [(ngModel)]="dateAfter" ngbDatepicker #dateAfterPicker="ngbDatepicker">
             <button class="btn btn-outline-secondary" (click)="dateAfterPicker.toggle()" type="button">
               <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
@@ -43,7 +43,7 @@
           </div>
 
           <div class="input-group input-group-sm">
-            <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (focusout)="onFocusOut()" (keypress)="onKeyPress($event)"
+            <input class="form-control" [placeholder]="datePlaceHolder" (dateSelect)="onChangeDebounce()" (change)="onChangeDebounce()" (keypress)="onKeyPress($event)"
                     maxlength="10" [(ngModel)]="dateBefore" ngbDatepicker #dateBeforePicker="ngbDatepicker">
             <button class="btn btn-outline-secondary" (click)="dateBeforePicker.toggle()" type="button">
               <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="bi bi-calendar" viewBox="0 0 16 16">
diff --git a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
index 91c81cf1f..81844382c 100644
--- a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
+++ b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
@@ -4,7 +4,6 @@ import { NgbDateAdapter } from '@ng-bootstrap/ng-bootstrap';
 import { Subject, Subscription } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 import { SettingsService } from 'src/app/services/settings.service';
-import { LocalizedDateParserFormatter } from 'src/app/utils/ngb-date-parser-formatter';
 import { ISODateAdapter } from 'src/app/utils/ngb-iso-date-adapter';
 
 export interface DateSelection {
@@ -26,11 +25,9 @@ const LAST_YEAR = 3
   ]
 })
 export class DateDropdownComponent implements OnInit, OnDestroy {
-  private settings: SettingsService
 
   constructor(settings: SettingsService) {
-    this.settings = settings
-    this.datePlaceHolder = this.settings.getLocalizedDateInputFormat()
+    this.datePlaceHolder = settings.getLocalizedDateInputFormat()
   }
 
   quickFilters = [
@@ -113,23 +110,6 @@ export class DateDropdownComponent implements OnInit, OnDestroy {
     this.datesSetDebounce$.next({after: this.dateAfter, before: this.dateBefore})
   }
 
-  onFocusOut() {
-    this.dateAfter = this.maybePadString(this.dateAfter)
-    this.dateBefore = this.maybePadString(this.dateBefore)
-  }
-
-  maybePadString(value): string {
-    // Allow dates to be specified without 'padding' e.g. 2/3
-    if (!value || value.length == 10) return value; // null or already formatted
-    if ([',','.','/','-'].some(sep => value.includes(sep))) {
-      let valArr = value.split(/[\.,\/-]+/)
-      valArr = valArr.map(segment => segment.padStart(2,'0'))
-      let dateFormatter = new LocalizedDateParserFormatter(this.settings)
-      value = dateFormatter.preformatDateInput(valArr.join(''))
-    }
-    return value
-  }
-
   clearBefore() {
     this.dateBefore = null
     this.onChange()

From 0826e0f96b840dd420a0aca5e8229af1875dc02a Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Fri, 11 Mar 2022 00:48:06 -0800
Subject: [PATCH 10/13] code cleanup

---
 src-ui/src/app/utils/ngb-date-parser-formatter.ts | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src-ui/src/app/utils/ngb-date-parser-formatter.ts b/src-ui/src/app/utils/ngb-date-parser-formatter.ts
index 90f338702..9d74afe39 100644
--- a/src-ui/src/app/utils/ngb-date-parser-formatter.ts
+++ b/src-ui/src/app/utils/ngb-date-parser-formatter.ts
@@ -4,6 +4,7 @@ import { SettingsService } from "../services/settings.service"
 
 @Injectable()
 export class LocalizedDateParserFormatter extends NgbDateParserFormatter {
+  private separatorRegExp: RegExp = /[\.,\/-]+/
 
   constructor(private settings: SettingsService) {
     super()
@@ -35,17 +36,17 @@ export class LocalizedDateParserFormatter extends NgbDateParserFormatter {
    * have it expanded to 10.03.2022, in the case of the German format.
    * (All other formats are also supported)
    * 
-   * It also strips any separators before running formatting, 
+   * It also strips any separators before running formatting and pads
+   * any parts of the string, e.g. allowing for 1/2/22,
    * which allows quick entry of the date on the numpad. 
    */
   public preformatDateInput(value: string): string {
     let inputFormat = this.getDateInputFormat()
     let dateSeparator = inputFormat.replace(/[dmy]/gi, '').charAt(0)
-
-    if ([',','.','/','-'].some(sep => value.includes(sep))) {
-      let valArr = value.split(/[\.,\/-]+/)
-      valArr = valArr.map(segment => segment.padStart(2,'0'))
-      value = valArr.join('')
+    
+    if (this.separatorRegExp.test(value)) {
+      // split on separator, pad & re-join without separator
+      value = value.split(this.separatorRegExp).map(segment => segment.padStart(2,'0')).join('')
     }    
 
     if (value.length == 4 && inputFormat.substring(0, 4) != 'yyyy') {

From 20a6c5e7b7704da2c677540299f7ed5ac90eff33 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Fri, 11 Mar 2022 00:52:32 -0800
Subject: [PATCH 11/13] more code cleanup

---
 src-ui/src/app/utils/ngb-date-parser-formatter.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src-ui/src/app/utils/ngb-date-parser-formatter.ts b/src-ui/src/app/utils/ngb-date-parser-formatter.ts
index 9d74afe39..e2a79fd0c 100644
--- a/src-ui/src/app/utils/ngb-date-parser-formatter.ts
+++ b/src-ui/src/app/utils/ngb-date-parser-formatter.ts
@@ -40,9 +40,9 @@ export class LocalizedDateParserFormatter extends NgbDateParserFormatter {
    * any parts of the string, e.g. allowing for 1/2/22,
    * which allows quick entry of the date on the numpad. 
    */
-  public preformatDateInput(value: string): string {
-    let inputFormat = this.getDateInputFormat()
-    let dateSeparator = inputFormat.replace(/[dmy]/gi, '').charAt(0)
+  private preformatDateInput(value: string): string {
+    const inputFormat = this.getDateInputFormat()
+    const dateSeparator = inputFormat.replace(/[dmy]/gi, '').charAt(0)
     
     if (this.separatorRegExp.test(value)) {
       // split on separator, pad & re-join without separator

From 4773d0bb7f03dd739340ad6dfddf728df35e1297 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Fri, 11 Mar 2022 01:03:43 -0800
Subject: [PATCH 12/13] semicolons

---
 .../components/common/date-dropdown/date-dropdown.component.ts  | 2 +-
 src-ui/src/app/components/common/input/date/date.component.ts   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
index 81844382c..fecac367b 100644
--- a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
+++ b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
@@ -123,7 +123,7 @@ export class DateDropdownComponent implements OnInit, OnDestroy {
   // prevent chars other than numbers and separators
   onKeyPress(event: KeyboardEvent) {
     if (!/[0-9,\.\/-]+/.test(event.key)) {
-      event.preventDefault();
+      event.preventDefault()
     }
   }
 }
diff --git a/src-ui/src/app/components/common/input/date/date.component.ts b/src-ui/src/app/components/common/input/date/date.component.ts
index 061689d1a..709f96e75 100644
--- a/src-ui/src/app/components/common/input/date/date.component.ts
+++ b/src-ui/src/app/components/common/input/date/date.component.ts
@@ -30,7 +30,7 @@ export class DateComponent extends AbstractInputComponent<string> implements OnI
   // prevent chars other than numbers and separators
   onKeyPress(event: KeyboardEvent) {
     if (!/[0-9,\.\/-]+/.test(event.key)) {
-      event.preventDefault();
+      event.preventDefault()
     }
   }
 }

From 4e4035a86791528aa4621aaca3135ef38893bd3f Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Fri, 11 Mar 2022 08:11:35 -0800
Subject: [PATCH 13/13] Fix enter key was prevented

---
 .../components/common/date-dropdown/date-dropdown.component.ts  | 2 +-
 src-ui/src/app/components/common/input/date/date.component.ts   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
index fecac367b..70d02540c 100644
--- a/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
+++ b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
@@ -122,7 +122,7 @@ export class DateDropdownComponent implements OnInit, OnDestroy {
 
   // prevent chars other than numbers and separators
   onKeyPress(event: KeyboardEvent) {
-    if (!/[0-9,\.\/-]+/.test(event.key)) {
+    if ('Enter' !== event.key && !/[0-9,\.\/-]+/.test(event.key)) {
       event.preventDefault()
     }
   }
diff --git a/src-ui/src/app/components/common/input/date/date.component.ts b/src-ui/src/app/components/common/input/date/date.component.ts
index 709f96e75..251ba9c98 100644
--- a/src-ui/src/app/components/common/input/date/date.component.ts
+++ b/src-ui/src/app/components/common/input/date/date.component.ts
@@ -29,7 +29,7 @@ export class DateComponent extends AbstractInputComponent<string> implements OnI
 
   // prevent chars other than numbers and separators
   onKeyPress(event: KeyboardEvent) {
-    if (!/[0-9,\.\/-]+/.test(event.key)) {
+    if ('Enter' !== event.key && !/[0-9,\.\/-]+/.test(event.key)) {
       event.preventDefault()
     }
   }