Merge pull request #1007 from paperless-ngx/improve-date-paste-input

Feature: better date pasting

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">

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()
   }
 
@@ -30,7 +35,20 @@ export class DateComponent
 
   placeholder: string
 
-  // prevent chars other than numbers and separators
+  onPaste(event: ClipboardEvent) {
+    const clipboardData: DataTransfer =
+      event.clipboardData || window['clipboardData']
+    if (clipboardData) {
+      event.preventDefault()
+      let pastedText = clipboardData.getData('text')
+      pastedText = pastedText.replace(/[\sa-z#!$%\^&\*;:{}=\-_`~()]+/g, '')
+      const parsedDate = this.ngbDateParserFormatter.parse(pastedText)
+      const formattedDate = this.ngbDateParserFormatter.format(parsedDate)
+      this.writeValue(formattedDate)
+      this.onChange(formattedDate)
+    }
+  }
+
   onKeyPress(event: KeyboardEvent) {
     if ('Enter' !== event.key && !/[0-9,\.\/-]+/.test(event.key)) {
       event.preventDefault()