From f1ea7843a73bde9a31521fc3a60a6cc7fc7d1e1f Mon Sep 17 00:00:00 2001
From: Chris <chrisvel@users.noreply.github.com>
Date: Sat, 14 Mar 2026 08:04:00 +0200
Subject: [PATCH] Fix date format inconsistency in Defer Until field (#941)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes #938

The Defer Until field was using i18n.language directly instead of
resolveUserLocale(), causing it to display dates in MM/DD/YYYY format
(US default) regardless of timezone setting.

Now uses the same locale resolution pattern as the Due Date field,
which combines language with timezone-derived country code (e.g.,
"en" + Greek timezone → "en-GR" → DD/MM/YYYY format).

Changes:
- Import useMemo and resolveUserLocale
- Add displayLocale memo to resolve timezone-aware locale
- Use displayLocale instead of i18n.language in toLocaleString()
---
 .../components/Task/TaskDetails/TaskDeferUntilCard.tsx   | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/components/Task/TaskDetails/TaskDeferUntilCard.tsx b/frontend/components/Task/TaskDetails/TaskDeferUntilCard.tsx
index 6758c60..953963b 100644
--- a/frontend/components/Task/TaskDetails/TaskDeferUntilCard.tsx
+++ b/frontend/components/Task/TaskDetails/TaskDeferUntilCard.tsx
@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ClockIcon } from '@heroicons/react/24/outline';
 import TaskDeferUntilSection from '../TaskForm/TaskDeferUntilSection';
 import { Task } from '../../../entities/Task';
+import { resolveUserLocale } from '../../../utils/localeUtils';
 
 interface TaskDeferUntilCardProps {
     task: Task;
@@ -24,12 +25,16 @@ const TaskDeferUntilCard: React.FC<TaskDeferUntilCardProps> = ({
     onCancel,
 }) => {
     const { t, i18n } = useTranslation();
+    const displayLocale = useMemo(
+        () => resolveUserLocale(i18n.language),
+        [i18n.language]
+    );
 
     const getDeferUntilDisplay = (deferUntil: string) => {
         const date = new Date(deferUntil);
         if (Number.isNaN(date.getTime())) return null;
 
-        const formattedDateTime = date.toLocaleString(i18n.language, {
+        const formattedDateTime = date.toLocaleString(displayLocale, {
             day: '2-digit',
             month: '2-digit',
             year: 'numeric',