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

frontend/components/Domain/Recipe/RecipeContextMenu.vue

@@ -59,7 +59,13 @@
               v-on="on"
             ></v-text-field>
           </template>
-          <v-date-picker v-model="newMealdate" no-title @input="pickerMenu = false"></v-date-picker>
+          <v-date-picker
+            v-model="newMealdate"
+            no-title
+            :first-day-of-week="firstDayOfWeek"
+            :local="$i18n.locale"
+            @input="pickerMenu = false"
+          />
         </v-menu>
         <v-select
           v-model="newMealType"
@@ -111,6 +117,7 @@ import RecipeDialogPrintPreferences from "./RecipeDialogPrintPreferences.vue";
 import RecipeDialogShare from "./RecipeDialogShare.vue";
 import { useLoggedInState } from "~/composables/use-logged-in-state";
 import { useUserApi } from "~/composables/api";
+import { useGroupSelf } from "~/composables/use-groups";
 import { alert } from "~/composables/use-toast";
 import { usePlanTypeOptions } from "~/composables/use-group-mealplan";
 import { Recipe } from "~/lib/api/types/recipe";
@@ -224,11 +231,16 @@ export default defineComponent({
     });
 
     const { i18n, $auth, $globals } = useContext();
+    const { group } = useGroupSelf();
     const { isOwnGroup } = useLoggedInState();
 
     const route = useRoute();
     const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
 
+    const firstDayOfWeek = computed(() => {
+      return group.value?.preferences?.firstDayOfWeek || 0;
+    });
+
     // ===========================================================================
     // Context Menu Setup
 
@@ -432,6 +444,7 @@ export default defineComponent({
       addRecipeToPlan,
       icon,
       planTypeOptions,
+      firstDayOfWeek,
     };
   },
 });

frontend/components/Domain/Recipe/RecipeDialogShare.vue

@@ -22,7 +22,13 @@
               v-on="on"
             ></v-text-field>
           </template>
-          <v-date-picker v-model="expirationDate" no-title @input="datePickerMenu = false"></v-date-picker>
+          <v-date-picker
+            v-model="expirationDate"
+            no-title
+            :first-day-of-week="firstDayOfWeek"
+            :local="$i18n.locale"
+            @input="datePickerMenu = false"
+          />
         </v-menu>
       </v-card-text>
       <v-card-actions class="justify-end">
@@ -60,6 +66,7 @@ import { defineComponent, computed, toRefs, reactive, useContext, useRoute } fro
 import { useClipboard, useShare, whenever } from "@vueuse/core";
 import { RecipeShareToken } from "~/lib/api/types/recipe";
 import { useUserApi } from "~/composables/api";
+import { useGroupSelf } from "~/composables/use-groups";
 import { alert } from "~/composables/use-toast";
 
 export default defineComponent({
@@ -106,9 +113,14 @@ export default defineComponent({
     );
 
     const { $auth, i18n } = useContext();
+    const { group } = useGroupSelf();
     const route = useRoute();
     const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
 
+    const firstDayOfWeek = computed(() => {
+      return group.value?.preferences?.firstDayOfWeek || 0;
+    });
+
     // ============================================================
     // Token Actions
 
@@ -185,6 +197,7 @@ export default defineComponent({
       dialog,
       createNewToken,
       deleteToken,
+      firstDayOfWeek,
       shareRecipe,
       copyTokenLink,
     };

frontend/components/Domain/Recipe/RecipeLastMade.vue

@@ -41,6 +41,7 @@
                     <v-date-picker
                       v-model="newTimelineEventTimestamp"
                       no-title
+                      :first-day-of-week="firstDayOfWeek"
                       :local="$i18n.locale"
                       @input="datePickerMenu = false"
                     />
@@ -109,10 +110,11 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, ref, toRefs, useContext } from "@nuxtjs/composition-api";
+import { computed, defineComponent, reactive, ref, toRefs, useContext } from "@nuxtjs/composition-api";
 import { whenever } from "@vueuse/core";
 import { VForm } from "~/types/vuetify";
 import { useUserApi } from "~/composables/api";
+import { useGroupSelf } from "~/composables/use-groups";
 import { Recipe, RecipeTimelineEventIn } from "~/lib/api/types/recipe";
 
 export default defineComponent({
@@ -129,6 +131,7 @@ export default defineComponent({
   setup(props, context) {
     const madeThisDialog = ref(false);
     const userApi = useUserApi();
+    const { group } = useGroupSelf();
     const { $auth, i18n } = useContext();
     const domMadeThisForm = ref<VForm>();
     const newTimelineEvent = ref<RecipeTimelineEventIn>({
@@ -153,6 +156,10 @@ export default defineComponent({
       }
     );
 
+    const firstDayOfWeek = computed(() => {
+      return group.value?.preferences?.firstDayOfWeek || 0;
+    });
+
     function clearImage() {
       newTimelineEventImage.value = undefined;
       newTimelineEventImageName.value = "";
@@ -226,6 +233,7 @@ export default defineComponent({
       ...toRefs(state),
       domMadeThisForm,
       madeThisDialog,
+      firstDayOfWeek,
       newTimelineEvent,
       newTimelineEventImage,
       newTimelineEventImagePreviewUrl,