From 8e2cb6d416276951a55b99c575443fddf9b81fe8 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 22 May 2022 08:59:43 -0700
Subject: [PATCH 1/2] Strip some characters from pasted date input

---
 .../common/input/date/date.component.html           |  2 +-
 .../components/common/input/date/date.component.ts  | 13 ++++++++++++-
 2 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 ca6ec0b26..e742ead9b 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)" (keypress)="onKeyPress($event)"
+          (dateSelect)="onChange(value)" (change)="onChange(value)" (keypress)="onKeyPress($event)" (paste)="onPaste($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 a6d39321b..47efeb744 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,18 @@ export class DateComponent
 
   placeholder: string
 
-  // prevent chars other than numbers and separators
+  onPaste(event: ClipboardEvent) {
+    let clipboardData: DataTransfer =
+      event.clipboardData || window['clipboardData']
+    if (clipboardData) {
+      let pastedText = clipboardData.getData('text')
+      pastedText = pastedText.replace(/[\sa-z#!$%\^&\*;:{}=\-_`~()]+/g, '')
+      event.preventDefault()
+      this.value = pastedText
+      this.onChange(pastedText)
+    }
+  }
+
   onKeyPress(event: KeyboardEvent) {
     if ('Enter' !== event.key && !/[0-9,\.\/-]+/.test(event.key)) {
       event.preventDefault()

From 0e0cbe35179ee2b1dca65a2e4f609926d0b23f30 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Sun, 22 May 2022 14:21:24 -0700
Subject: [PATCH 2/2] Use NgbDateParserFormatter

---
 .../common/input/date/date.component.ts         | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

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 47efeb744..44e7c7513 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,6 +1,8 @@
 import { Component, forwardRef, OnInit } from '@angular/core'
 import { NG_VALUE_ACCESSOR } from '@angular/forms'
+import { NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap'
 import { SettingsService } from 'src/app/services/settings.service'
+import { LocalizedDateParserFormatter } from 'src/app/utils/ngb-date-parser-formatter'
 import { AbstractInputComponent } from '../abstract-input'
 
 @Component({
@@ -19,7 +21,10 @@ export class DateComponent
   extends AbstractInputComponent<string>
   implements OnInit
 {
-  constructor(private settings: SettingsService) {
+  constructor(
+    private settings: SettingsService,
+    private ngbDateParserFormatter: NgbDateParserFormatter
+  ) {
     super()
   }
 
@@ -31,14 +36,16 @@ export class DateComponent
   placeholder: string
 
   onPaste(event: ClipboardEvent) {
-    let clipboardData: DataTransfer =
+    const clipboardData: DataTransfer =
       event.clipboardData || window['clipboardData']
     if (clipboardData) {
+      event.preventDefault()
       let pastedText = clipboardData.getData('text')
       pastedText = pastedText.replace(/[\sa-z#!$%\^&\*;:{}=\-_`~()]+/g, '')
-      event.preventDefault()
-      this.value = pastedText
-      this.onChange(pastedText)
+      const parsedDate = this.ngbDateParserFormatter.parse(pastedText)
+      const formattedDate = this.ngbDateParserFormatter.format(parsedDate)
+      this.writeValue(formattedDate)
+      this.onChange(formattedDate)
     }
   }