Merge 3f10a031a5 into 7b885a11e2

libs/ui/src/lib/fire-calculator/fire-calculator.component.html

@@ -31,9 +31,7 @@
         <mat-form-field appearance="outline" class="w-100">
           <mat-label i18n>Retirement Date</mat-label>
           <div>
-            {{
+            {{ getFormattedRetirementDate() }}
-              calculatorForm.get('retirementDate')?.value | date: 'MMMM yyyy'
-            }}
           </div>
           <input
             class="d-none"

libs/ui/src/lib/fire-calculator/fire-calculator.component.ts

@@ -3,7 +3,7 @@ import {
   transformTickToAbbreviation
 } from '@ghostfolio/common/chart-helper';
 import { primaryColorRgb } from '@ghostfolio/common/config';
-import { getLocale } from '@ghostfolio/common/helper';
+import { getDateFnsLocale, getLocale } from '@ghostfolio/common/helper';
 import { FireCalculationCompleteEvent } from '@ghostfolio/common/interfaces';
 import { ColorScheme } from '@ghostfolio/common/types';
 
@@ -47,6 +47,7 @@ import {
   add,
   addDays,
   addYears,
+  format,
   getMonth,
   setMonth,
   setYear,
@@ -235,6 +236,20 @@ export class GfFireCalculatorComponent implements OnChanges, OnDestroy {
     this.calculatorForm.get('retirementDate').disable({ emitEvent: false });
   }
 
+  public getFormattedRetirementDate(): string {
+    const retirementDate = this.calculatorForm.get('retirementDate')?.value;
+
+    if (!retirementDate) {
+      return '';
+    }
+
+    const dateFnsLocale = getDateFnsLocale(this.locale);
+
+    return format(retirementDate, 'MMMM yyyy', {
+      locale: dateFnsLocale
+    });
+  }
+
   public setMonthAndYear(
     normalizedMonthAndYear: Date,
     datepicker: MatDatepicker<Date>