From a460c32674eba9d677ce9a7747d1c2a8fc2f04fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ars=C3=A8ne=20Reymond?=
 <66876397+p0lycarpio@users.noreply.github.com>
Date: Mon, 3 Nov 2025 03:39:33 +0100
Subject: [PATCH] fix: Locale dates format (#6211)

Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com>
---
 frontend/components/Domain/QueryFilterBuilder.vue    |  2 +-
 .../RecipeContextMenu/RecipeContextMenuContent.vue   |  2 +-
 .../components/Domain/Recipe/RecipeDataTable.vue     | 11 +----------
 .../components/Domain/Recipe/RecipeDialogShare.vue   | 11 ++---------
 frontend/components/Domain/Recipe/RecipeLastMade.vue |  4 ++--
 .../components/Domain/Recipe/RecipeTimelineItem.vue  |  4 ++--
 .../Domain/ShoppingList/ShoppingListItem.vue         |  5 ++---
 frontend/pages/admin/backups.vue                     |  2 +-
 frontend/pages/group/data/foods.vue                  | 12 +-----------
 frontend/pages/group/data/units.vue                  | 12 +-----------
 frontend/pages/household/mealplan/planner/edit.vue   |  3 +--
 11 files changed, 15 insertions(+), 53 deletions(-)

diff --git a/frontend/components/Domain/QueryFilterBuilder.vue b/frontend/components/Domain/QueryFilterBuilder.vue
index 848f9a74a..aececb2f9 100644
--- a/frontend/components/Domain/QueryFilterBuilder.vue
+++ b/frontend/components/Domain/QueryFilterBuilder.vue
@@ -165,7 +165,7 @@
               >
                 <template #activator="{ props: activatorProps }">
                   <v-text-field
-                    v-model="field.value"
+                    :model-value="field.value ? $d(new Date(field.value + 'T00:00:00')) : null"
                     persistent-hint
                     :prepend-icon="$globals.icons.calendar"
                     variant="underlined"
diff --git a/frontend/components/Domain/Recipe/RecipeContextMenu/RecipeContextMenuContent.vue b/frontend/components/Domain/Recipe/RecipeContextMenu/RecipeContextMenuContent.vue
index a0b76d974..f78832eef 100644
--- a/frontend/components/Domain/Recipe/RecipeContextMenu/RecipeContextMenuContent.vue
+++ b/frontend/components/Domain/Recipe/RecipeContextMenu/RecipeContextMenuContent.vue
@@ -55,7 +55,7 @@
       >
         <template #activator="{ props: activatorProps }">
           <v-text-field
-            v-model="newMealdateString"
+            :model-value="$d(newMealdate)"
             :label="$t('general.date')"
             :prepend-icon="$globals.icons.calendar"
             v-bind="activatorProps"
diff --git a/frontend/components/Domain/Recipe/RecipeDataTable.vue b/frontend/components/Domain/Recipe/RecipeDataTable.vue
index 1836bad57..05e7f964a 100644
--- a/frontend/components/Domain/Recipe/RecipeDataTable.vue
+++ b/frontend/components/Domain/Recipe/RecipeDataTable.vue
@@ -57,7 +57,7 @@
       </div>
     </template>
     <template #[`item.dateAdded`]="{ item }">
-      {{ formatDate(item.dateAdded!) }}
+      {{ item.dateAdded ? $d(new Date(item.dateAdded)) : '' }}
     </template>
   </v-data-table>
 </template>
@@ -153,15 +153,6 @@ const headers = computed(() => {
   return hdrs;
 });
 
-function formatDate(date: string) {
-  try {
-    return i18n.d(Date.parse(date), "medium");
-  }
-  catch {
-    return "";
-  }
-}
-
 // ============
 // Group Members
 const api = useUserApi();
diff --git a/frontend/components/Domain/Recipe/RecipeDialogShare.vue b/frontend/components/Domain/Recipe/RecipeDialogShare.vue
index 0314afd2b..ae8257e67 100644
--- a/frontend/components/Domain/Recipe/RecipeDialogShare.vue
+++ b/frontend/components/Domain/Recipe/RecipeDialogShare.vue
@@ -16,7 +16,7 @@
         >
           <template #activator="{ props: activatorProps }">
             <v-text-field
-              v-model="expirationDateString"
+              :model-value="$d(expirationDate)"
               :label="$t('recipe-share.expiration-date')"
               :hint="$t('recipe-share.default-30-days')"
               persistent-hint
@@ -59,11 +59,8 @@
 
           <div class="pl-3 flex-grow-1">
             <v-list-item-title>
-              {{ $t("recipe-share.expires-at") }}
+              {{ $t("recipe-share.expires-at") + ' ' + $d(new Date(token.expiresAt!), "short") }}
             </v-list-item-title>
-            <v-list-item-subtitle>
-              {{ $d(new Date(token.expiresAt!), "long") }}
-            </v-list-item-subtitle>
           </div>
 
           <v-btn
@@ -111,10 +108,6 @@ const datePickerMenu = ref(false);
 const expirationDate = ref(new Date(Date.now() - new Date().getTimezoneOffset() * 60000));
 const tokens = ref<RecipeShareToken[]>([]);
 
-const expirationDateString = computed(() => {
-  return expirationDate.value.toISOString().substring(0, 10);
-});
-
 whenever(
   () => dialog.value,
   () => {
diff --git a/frontend/components/Domain/Recipe/RecipeLastMade.vue b/frontend/components/Domain/Recipe/RecipeLastMade.vue
index ddd1fbbad..24e3bdeac 100644
--- a/frontend/components/Domain/Recipe/RecipeLastMade.vue
+++ b/frontend/components/Domain/Recipe/RecipeLastMade.vue
@@ -32,7 +32,7 @@
                   >
                     <template #activator="{ props: activatorProps }">
                       <v-text-field
-                        v-model="newTimelineEventTimestampString"
+                        :model-value="$d(newTimelineEventTimestamp)"
                         :prepend-icon="$globals.icons.calendar"
                         v-bind="activatorProps"
                         readonly
@@ -102,7 +102,7 @@
                 <span class="text-body-1 opacity-80">
                   <b>{{ $t("general.last-made") }}</b>
                   <br>
-                  {{ lastMade ? new Date(lastMade).toLocaleDateString($i18n.locale) : $t("general.never") }}
+                  {{ lastMade ? $d(new Date(lastMade)) : $t("general.never") }}
                 </span>
                 <v-icon end size="large" color="primary">
                   {{ $globals.icons.createAlt }}
diff --git a/frontend/components/Domain/Recipe/RecipeTimelineItem.vue b/frontend/components/Domain/Recipe/RecipeTimelineItem.vue
index c8612d635..b94cf58d2 100644
--- a/frontend/components/Domain/Recipe/RecipeTimelineItem.vue
+++ b/frontend/components/Domain/Recipe/RecipeTimelineItem.vue
@@ -5,7 +5,7 @@
         <v-icon class="mr-1">
           {{ $globals.icons.calendar }}
         </v-icon>
-        {{ new Date(event.timestamp).toLocaleDateString($i18n.locale) }}
+        {{ $d(new Date(event.timestamp)) }}
       </v-chip>
     </template>
     <v-card
@@ -22,7 +22,7 @@
           <v-col v-if="useMobileFormat" align-self="center" class="pr-0">
             <v-chip label>
               <v-icon> {{ $globals.icons.calendar }} </v-icon>
-              {{ new Date(event.timestamp || "").toLocaleDateString($i18n.locale) }}
+              {{ $d(new Date(event.timestamp || "")) }}
             </v-chip>
           </v-col>
           <v-col v-else cols="9" style="margin: auto; text-align: center">
diff --git a/frontend/components/Domain/ShoppingList/ShoppingListItem.vue b/frontend/components/Domain/ShoppingList/ShoppingListItem.vue
index 2f5e28dc9..a8327b0ff 100644
--- a/frontend/components/Domain/ShoppingList/ShoppingListItem.vue
+++ b/frontend/components/Domain/ShoppingList/ShoppingListItem.vue
@@ -130,9 +130,8 @@
       <v-col cols="auto">
         <div class="text-caption font-weight-light font-italic">
           {{ $t("shopping-list.completed-on", {
-            date: new Date(listItem.updatedAt
-              || "").toLocaleDateString($i18n.locale) })
-          }}
+            date: listItem.updatedAt ? $d(new Date(listItem.updatedAt)) : '',
+          }) }}
         </div>
       </v-col>
     </v-row>
diff --git a/frontend/pages/admin/backups.vue b/frontend/pages/admin/backups.vue
index 4f700c3b0..1fcc467c7 100644
--- a/frontend/pages/admin/backups.vue
+++ b/frontend/pages/admin/backups.vue
@@ -106,7 +106,7 @@
           @click:row="setSelected"
         >
           <template #[`item.date`]="{ item }">
-            {{ $d(Date.parse(item.date), "medium") }}
+            {{ $d(Date.parse(item.date)) }}
           </template>
           <template #[`item.actions`]="{ item }">
             <v-btn
diff --git a/frontend/pages/group/data/foods.vue b/frontend/pages/group/data/foods.vue
index 52bd3b618..49a60ed24 100644
--- a/frontend/pages/group/data/foods.vue
+++ b/frontend/pages/group/data/foods.vue
@@ -324,7 +324,7 @@
         </v-icon>
       </template>
       <template #[`item.createdAt`]="{ item }">
-        {{ formatDate(item.createdAt) }}
+        {{ item.createdAt ? $d(new Date(item.createdAt)) : '' }}
       </template>
       <template #button-bottom>
         <BaseButton @click="seedDialog = true">
@@ -417,15 +417,6 @@ export default defineNuxtComponent({
       },
     ];
 
-    function formatDate(date: string) {
-      try {
-        return i18n.d(Date.parse(date), "medium");
-      }
-      catch {
-        return "";
-      }
-    }
-
     const userHousehold = computed(() => $auth.user.value?.householdSlug || "");
     const foodStore = useFoodStore();
     const foods = computed(() => foodStore.store.value.map((food) => {
@@ -634,7 +625,6 @@ export default defineNuxtComponent({
       foods,
       allLabels,
       validators,
-      formatDate,
       // Create
       createDialog,
       domNewFoodForm,
diff --git a/frontend/pages/group/data/units.vue b/frontend/pages/group/data/units.vue
index 60b9fcad2..e7756845d 100644
--- a/frontend/pages/group/data/units.vue
+++ b/frontend/pages/group/data/units.vue
@@ -292,7 +292,7 @@
         </v-icon>
       </template>
       <template #[`item.createdAt`]="{ item }">
-        {{ formatDate(item.createdAt) }}
+        {{ item.createdAt ? $d(new Date(item.createdAt)) : '' }}
       </template>
       <template #button-bottom>
         <BaseButton @click="seedDialog = true">
@@ -381,15 +381,6 @@ export default defineNuxtComponent({
       },
     ];
 
-    function formatDate(date: string) {
-      try {
-        return i18n.d(Date.parse(date), "medium");
-      }
-      catch {
-        return "";
-      }
-    }
-
     const { store, actions: unitActions } = useUnitStore();
 
     // ============================================================
@@ -545,7 +536,6 @@ export default defineNuxtComponent({
       tableHeaders,
       store,
       validators,
-      formatDate,
       // Create
       createDialog,
       domNewUnitForm,
diff --git a/frontend/pages/household/mealplan/planner/edit.vue b/frontend/pages/household/mealplan/planner/edit.vue
index 82ce3b176..ca630c677 100644
--- a/frontend/pages/household/mealplan/planner/edit.vue
+++ b/frontend/pages/household/mealplan/planner/edit.vue
@@ -33,9 +33,8 @@
         >
           <template #activator="{ props }">
             <v-text-field
-              v-model="newMealDateString"
+              :model-value="$d(newMeal.date)"
               :label="$t('general.date')"
-              :hint="$t('recipe.date-format-hint-yyyy-mm-dd')"
               persistent-hint
               :prepend-icon="$globals.icons.calendar"
               v-bind="props"