fix: Locale dates format (#6211)

Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com>

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"

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"

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();

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,
   () => {

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 }}

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">

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>

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

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,

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,

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"