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] 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)