fix: add locale and first day of week to all date pickers (#3303)

frontend/pages/group/mealplan/planner.vue

@@ -16,7 +16,13 @@
           {{ $d(weekRange.start, "short") }} - {{ $d(weekRange.end, "short") }}
         </v-btn>
       </template>
-      <v-date-picker v-model="state.range" no-title range>
+      <v-date-picker
+        v-model="state.range"
+        no-title
+        range
+        :first-day-of-week="firstDayOfWeek"
+        :local="$i18n.locale"
+      >
         <v-spacer></v-spacer>
         <v-btn text color="primary" @click="state.picker = false">
           {{ $t("general.ok") }}
@@ -43,6 +49,7 @@
 <script lang="ts">
 import { computed, defineComponent, ref, useRoute, useRouter } from "@nuxtjs/composition-api";
 import { isSameDay, addDays, parseISO } from "date-fns";
+import { useGroupSelf } from "~/composables/use-groups";
 import { useMealplans } from "~/composables/use-group-mealplan";
 
 export default defineComponent({
@@ -50,6 +57,7 @@ export default defineComponent({
   setup() {
     const route = useRoute();
     const router = useRouter();
+    const { group } = useGroupSelf();
 
     // Force to /view if current route is /planner
     if (route.value.path === "/group/mealplan/planner") {
@@ -72,6 +80,10 @@ export default defineComponent({
       end: addDays(new Date(), 6),
     });
 
+    const firstDayOfWeek = computed(() => {
+      return group.value?.preferences?.firstDayOfWeek || 0;
+    });
+
     const recipeSearchTerm = ref("");
 
     const weekRange = computed(() => {
@@ -128,6 +140,7 @@ export default defineComponent({
       actions,
       mealsByDate,
       weekRange,
+      firstDayOfWeek,
       recipeSearchTerm,
     };
   },

frontend/pages/group/mealplan/planner/edit.vue

@@ -46,8 +46,9 @@
           </template>
           <v-date-picker
             v-model="newMeal.date"
-            :first-day-of-week="firstDayOfWeek"
             no-title
+            :first-day-of-week="firstDayOfWeek"
+            :local="$i18n.locale"
             @input="state.pickerMenu = false"
           />
         </v-menu>
@@ -256,13 +257,7 @@ export default defineComponent({
     });
 
     const firstDayOfWeek = computed(() => {
-      const pref = group.value?.preferences?.firstDayOfWeek;
-
-      if (pref) {
-        return pref;
-      }
-
-      return 0;
+      return group.value?.preferences?.firstDayOfWeek || 0;
     });
 
     function onMoveCallback(evt: SortableEvent) {