Add locale to QDate and initiate localeDates in store

src/lib/filters.js

@@ -1,6 +1,7 @@
 import { i18n } from 'src/boot/i18n';
 import { date as qdate, format } from 'quasar';
 const { pad } = format;
+import { useAppStore } from 'stores/app';
 
 export function currency(val) {
     return typeof val === 'number' ? val.toFixed(2) + '€' : val;
@@ -16,14 +17,9 @@ export function date(val, format = 'YYYY-MM-DD') {
 
 export const formatDate = (timeStamp, format = 'YYYY-MM-DD') => {
     if (!timeStamp) return '';
-    const { messages, locale } = i18n.global;
+    const appStore = useAppStore();
 
-    return qdate.formatDate(timeStamp, format, {
+    return qdate.formatDate(timeStamp, format, appStore.localeDates);
-        days: messages.value[locale.value].date.days,
-        months: messages.value[locale.value].date.months,
-        daysShort: messages.value[locale.value].date.daysShort,
-        monthsShort: messages.value[locale.value].date.monthsShort
-    });
 };
 
 /**

src/pages/Ecomerce/CheckoutView.vue

@@ -8,6 +8,7 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 import { formatDateTitle, formatDate } from 'src/lib/filters.js';
 import useNotify from 'src/composables/useNotify.js';
 import { useAppStore } from 'stores/app';
+import { storeToRefs } from 'pinia';
 
 const jApi = inject('jApi');
 const { t } = useI18n();
@@ -15,6 +16,7 @@ const route = useRoute();
 const router = useRouter();
 const { notify } = useNotify();
 const appStore = useAppStore();
+const { localeDates } = storeToRefs(appStore);
 
 const stepperRef = ref(null);
 
@@ -352,6 +354,7 @@ onMounted(async () => {
                         v-model="orderForm.date"
                         class="margin-auto"
                         color="accent"
+                        :locale="localeDates"
                     />
                 </div>
                 <!-- Address step -->

src/stores/app.js

@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia';
 import { jApi } from 'boot/axios';
 import useNotify from 'src/composables/useNotify.js';
+import { i18n } from 'src/boot/i18n';
 
 const { notify } = useNotify();
 
@@ -13,7 +14,13 @@ export const useAppStore = defineStore('hedera', {
         rightDrawerOpen: false,
         isHeaderMounted: false,
         menuEssentialLinks: [],
-        basketOrderId: null
+        basketOrderId: null,
+        localeDates: {
+            days: [],
+            months: [],
+            daysShort: [],
+            monthsShort: []
+        }
     }),
 
     actions: {
@@ -48,8 +55,19 @@ export const useAppStore = defineStore('hedera', {
             this.$patch({ imageUrl });
         },
 
+        getLocaleDates() {
+            const { messages, locale } = i18n.global;
+            this.localeDates = {
+                days: messages.value[locale.value].date.days,
+                months: messages.value[locale.value].date.months,
+                daysShort: messages.value[locale.value].date.daysShort,
+                monthsShort: messages.value[locale.value].date.monthsShort
+            };
+        },
+
         async init() {
             this.getBasketOrderId();
+            this.getLocaleDates();
         },
 
         getBasketOrderId() {