From 31b74515b6fd8057d12ad5c9131973314a6ec102 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Sat, 16 Jan 2021 20:49:12 -0800
Subject: [PATCH] Allow "live" changing of date format

---
 .../app/components/manage/settings/settings.component.html  | 6 +++---
 .../app/components/manage/settings/settings.component.ts    | 4 ++++
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src-ui/src/app/components/manage/settings/settings.component.html b/src-ui/src/app/components/manage/settings/settings.component.html
index d5acfb149..9b35b5b3f 100644
--- a/src-ui/src/app/components/manage/settings/settings.component.html
+++ b/src-ui/src/app/components/manage/settings/settings.component.html
@@ -48,15 +48,15 @@
 
             <div class="custom-control custom-radio">
               <input type="radio" id="dateFormatShort" name="dateFormat" class="custom-control-input" formControlName="dateFormat" value="shortDate">
-              <label class="custom-control-label" for="dateFormatShort" i18n>Short: {{today | customDate:'shortDate'}}</label>
+              <label class="custom-control-label" for="dateFormatShort" i18n>Short: {{today | customDate:'shortDate':null:comptuedDateLocale}}</label>
             </div>
             <div class="custom-control custom-radio">
               <input type="radio" id="dateFormatMedium" name="dateFormat" class="custom-control-input" formControlName="dateFormat" value="mediumDate">
-              <label class="custom-control-label" for="dateFormatMedium" i18n>Medium: {{today | customDate:'mediumDate'}}</label>
+              <label class="custom-control-label" for="dateFormatMedium" i18n>Medium: {{today | customDate:'mediumDate':null:comptuedDateLocale}}</label>
             </div>
             <div class="custom-control custom-radio">
               <input type="radio" id="dateFormatLong" name="dateFormat" class="custom-control-input" formControlName="dateFormat" value="longDate">
-              <label class="custom-control-label" for="dateFormatLong" i18n>Long: {{today | customDate:'longDate'}}</label>
+              <label class="custom-control-label" for="dateFormatLong" i18n>Long: {{today | customDate:'longDate':null:comptuedDateLocale}}</label>
             </div>
 
           </div>
diff --git a/src-ui/src/app/components/manage/settings/settings.component.ts b/src-ui/src/app/components/manage/settings/settings.component.ts
index d10297f95..9a315c245 100644
--- a/src-ui/src/app/components/manage/settings/settings.component.ts
+++ b/src-ui/src/app/components/manage/settings/settings.component.ts
@@ -30,6 +30,10 @@ export class SettingsComponent implements OnInit {
 
   savedViews: PaperlessSavedView[]
 
+  get comptuedDateLocale(): string {
+    return this.settingsForm.value.dateLocale || this.settingsForm.value.displayLanguage
+  }
+
   constructor(
     public savedViewService: SavedViewService,
     private documentListViewService: DocumentListViewService,