From 3f10a031a5e85fd5e3f878e5b4978280bb5034e0 Mon Sep 17 00:00:00 2001
From: David Requeno <davidrequeno52@gmail.com>
Date: Sun, 21 Dec 2025 21:53:02 -0600
Subject: [PATCH] Bugfix: Localize month names in FIRE calculator

This fix localizes the retirement date display in the FIRE calculator using date-fns with the provided locale input, instead of relying on Angular DatePipe which depends on LOCALE_ID.

Fixes #6070
---
 .../fire-calculator.component.html              |  4 +---
 .../fire-calculator.component.ts                | 17 ++++++++++++++++-
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/libs/ui/src/lib/fire-calculator/fire-calculator.component.html b/libs/ui/src/lib/fire-calculator/fire-calculator.component.html
index 4f9ac456c..514325787 100644
--- a/libs/ui/src/lib/fire-calculator/fire-calculator.component.html
+++ b/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>
-            {{
-              calculatorForm.get('retirementDate')?.value | date: 'MMMM yyyy'
-            }}
+            {{ getFormattedRetirementDate() }}
           </div>
           <input
             class="d-none"
diff --git a/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts b/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts
index 655798b3d..44bd9196e 100644
--- a/libs/ui/src/lib/fire-calculator/fire-calculator.component.ts
+++ b/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>