diff --git a/src-ui/src/app/components/document-detail/document-detail.component.ts b/src-ui/src/app/components/document-detail/document-detail.component.ts
index f6fdc1b86..fff3b6e21 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.ts
+++ b/src-ui/src/app/components/document-detail/document-detail.component.ts
@@ -34,6 +34,7 @@ import {
 } from 'rxjs/operators'
 import { PaperlessDocumentSuggestions } from 'src/app/data/paperless-document-suggestions'
 import { FILTER_FULLTEXT_MORELIKE } from 'src/app/data/filter-rule-type'
+import { normalizeDateStr } from 'src/app/utils/date'
 
 @Component({
   selector: 'app-document-detail',
@@ -146,7 +147,7 @@ export class DocumentDetailComponent
       .pipe(takeUntil(this.unsubscribeNotifier))
       .subscribe((changes) => {
         if (this.ogDate) {
-          let newDate = new Date(changes['created'])
+          let newDate = new Date(normalizeDateStr(changes['created']))
           newDate.setHours(
             this.ogDate.getHours(),
             this.ogDate.getMinutes(),
@@ -154,7 +155,7 @@ export class DocumentDetailComponent
             this.ogDate.getMilliseconds()
           )
           this.documentForm.patchValue(
-            { created: this.formatDate(newDate) },
+            { created: newDate.toISOString() },
             { emitEvent: false }
           )
         }
@@ -199,22 +200,22 @@ export class DocumentDetailComponent
             this.updateComponent(doc)
           }
 
-          this.ogDate = new Date(doc.created)
+          this.ogDate = new Date(normalizeDateStr(doc.created.toString()))
 
           // Initialize dirtyCheck
           this.store = new BehaviorSubject({
             title: doc.title,
             content: doc.content,
-            created: this.formatDate(this.ogDate),
+            created: this.ogDate.toISOString(),
             correspondent: doc.correspondent,
             document_type: doc.document_type,
             archive_serial_number: doc.archive_serial_number,
             tags: [...doc.tags],
           })
 
-          // ensure we're always starting with 24-char ISO8601 string
+          // start with ISO8601 string
           this.documentForm.patchValue(
-            { created: this.formatDate(this.ogDate) },
+            { created: this.ogDate.toISOString() },
             { emitEvent: false }
           )
 
@@ -485,8 +486,4 @@ export class DocumentDetailComponent
       this.password = (event.target as HTMLInputElement).value
     }
   }
-
-  formatDate(date: Date): string {
-    return date.toISOString().split('.')[0] + 'Z'
-  }
 }
diff --git a/src-ui/src/app/pipes/custom-date.pipe.ts b/src-ui/src/app/pipes/custom-date.pipe.ts
index bf5ab1457..bd4833d04 100644
--- a/src-ui/src/app/pipes/custom-date.pipe.ts
+++ b/src-ui/src/app/pipes/custom-date.pipe.ts
@@ -1,6 +1,7 @@
 import { DatePipe } from '@angular/common'
 import { Inject, LOCALE_ID, Pipe, PipeTransform } from '@angular/core'
 import { SettingsService, SETTINGS_KEYS } from '../services/settings.service'
+import { normalizeDateStr } from '../utils/date'
 
 const FORMAT_TO_ISO_FORMAT = {
   longDate: 'y-MM-dd',
@@ -33,6 +34,7 @@ export class CustomDatePipe implements PipeTransform {
       this.settings.get(SETTINGS_KEYS.DATE_LOCALE) ||
       this.defaultLocale
     let f = format || this.settings.get(SETTINGS_KEYS.DATE_FORMAT)
+    if (typeof value == 'string') value = normalizeDateStr(value)
     if (l == 'iso-8601') {
       return this.datePipe.transform(value, FORMAT_TO_ISO_FORMAT[f], timezone)
     } else {
diff --git a/src-ui/src/app/utils/date.ts b/src-ui/src/app/utils/date.ts
new file mode 100644
index 000000000..de5a89542
--- /dev/null
+++ b/src-ui/src/app/utils/date.ts
@@ -0,0 +1,5 @@
+// see https://github.com/dateutil/dateutil/issues/878 , JS Date does not
+// seem to accept these strings as valid dates so we must normalize offset
+export function normalizeDateStr(dateStr: string): string {
+  return dateStr.replace(/-(\d\d):\d\d:\d\d/gm, `-$1:00`)
+}