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