From 802cdabd759c772e50b7eb6ece5fdb297b6fb5df Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sat, 9 Mar 2024 21:51:23 +0800
Subject: [PATCH] the order of year and month in the date picker is based on
 the order in long date format set by the user

---
 .../desktop/DateRangeSelectionDialog.vue       |  4 ++++
 src/components/desktop/DateTimeSelect.vue      |  7 ++++---
 .../mobile/DateRangeSelectionSheet.vue         |  4 ++++
 .../mobile/DateTimeSelectionSheet.vue          |  4 ++++
 src/consts/datetime.js                         | 18 ++++++++++++------
 src/lib/i18n.js                                | 14 ++++++++++++++
 6 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/src/components/desktop/DateRangeSelectionDialog.vue b/src/components/desktop/DateRangeSelectionDialog.vue
index a83995d9..0525c634 100644
--- a/src/components/desktop/DateRangeSelectionDialog.vue
+++ b/src/components/desktop/DateRangeSelectionDialog.vue
@@ -27,6 +27,7 @@
                                  :week-start="firstDayOfWeek"
                                  :year-range="yearRange"
                                  :day-names="dayNames"
+                                 :year-first="isYearFirst"
                                  :is24="is24Hour"
                                  :partial-range="false"
                                  :preset-dates="presetRanges"
@@ -130,6 +131,9 @@ export default {
         dayNames() {
             return arrangeArrayWithNewStartIndex(this.$locale.getAllMinWeekdayNames(), this.firstDayOfWeek);
         },
+        isYearFirst() {
+            return this.$locale.isLongDateMonthAfterYear(this.userStore);
+        },
         is24Hour() {
             return this.$locale.isLongTime24HourFormat(this.userStore);
         },
diff --git a/src/components/desktop/DateTimeSelect.vue b/src/components/desktop/DateTimeSelect.vue
index 9878a822..abb545d5 100644
--- a/src/components/desktop/DateTimeSelect.vue
+++ b/src/components/desktop/DateTimeSelect.vue
@@ -20,6 +20,7 @@
                              :week-start="firstDayOfWeek"
                              :year-range="yearRange"
                              :day-names="dayNames"
+                             :year-first="isYearFirst"
                              :is24="is24Hour"
                              v-model="dateTime">
                 <template #month="{ text }">
@@ -98,6 +99,9 @@ export default {
         dayNames() {
             return arrangeArrayWithNewStartIndex(this.$locale.getAllMinWeekdayNames(), this.firstDayOfWeek);
         },
+        isYearFirst() {
+            return this.$locale.isLongDateMonthAfterYear(this.userStore);
+        },
         is24Hour() {
             return this.$locale.isLongTime24HourFormat(this.userStore);
         },
@@ -113,9 +117,6 @@ export default {
         };
     },
     methods: {
-        setCurrentTime() {
-            this.dateTime = getLocalDatetimeFromUnixTime(getCurrentUnixTime())
-        },
         getMonthShortName(month) {
             return this.$locale.getMonthShortName(month);
         }
diff --git a/src/components/mobile/DateRangeSelectionSheet.vue b/src/components/mobile/DateRangeSelectionSheet.vue
index a2538def..e77120ad 100644
--- a/src/components/mobile/DateRangeSelectionSheet.vue
+++ b/src/components/mobile/DateRangeSelectionSheet.vue
@@ -24,6 +24,7 @@
                                  :week-start="firstDayOfWeek"
                                  :year-range="yearRange"
                                  :day-names="dayNames"
+                                 :year-first="isYearFirst"
                                  :is24="is24Hour"
                                  :partial-range="false"
                                  :preset-dates="presetRanges"
@@ -118,6 +119,9 @@ export default {
         dayNames() {
             return arrangeArrayWithNewStartIndex(this.$locale.getAllMinWeekdayNames(), this.firstDayOfWeek);
         },
+        isYearFirst() {
+            return this.$locale.isLongDateMonthAfterYear(this.userStore);
+        },
         is24Hour() {
             return this.$locale.isLongTime24HourFormat(this.userStore);
         },
diff --git a/src/components/mobile/DateTimeSelectionSheet.vue b/src/components/mobile/DateTimeSelectionSheet.vue
index fa8194ed..e6f77896 100644
--- a/src/components/mobile/DateTimeSelectionSheet.vue
+++ b/src/components/mobile/DateTimeSelectionSheet.vue
@@ -22,6 +22,7 @@
                              :week-start="firstDayOfWeek"
                              :year-range="yearRange"
                              :day-names="dayNames"
+                             :year-first="isYearFirst"
                              v-model="dateTime">
                 <template #month="{ text }">
                     {{ getMonthShortName(text) }}
@@ -99,6 +100,9 @@ export default {
         },
         dayNames() {
             return arrangeArrayWithNewStartIndex(this.$locale.getAllMinWeekdayNames(), this.firstDayOfWeek);
+        },
+        isYearFirst() {
+            return this.$locale.isLongDateMonthAfterYear(this.userStore);
         }
     },
     beforeUnmount() {
diff --git a/src/consts/datetime.js b/src/consts/datetime.js
index 505d5be4..5ec9c1e4 100644
--- a/src/consts/datetime.js
+++ b/src/consts/datetime.js
@@ -67,15 +67,18 @@ const allWeekDaysArray = [
 const allLongDateFormat = {
     YYYYMMDD: {
         type: 1,
-        key: 'yyyy_mm_dd'
+        key: 'yyyy_mm_dd',
+        isMonthAfterYear: true
     },
     MMDDYYYY: {
         type: 2,
-        key: 'mm_dd_yyyy'
+        key: 'mm_dd_yyyy',
+        isMonthAfterYear: false
     },
     DDMMYYYY: {
         type: 3,
-        key: 'dd_mm_yyyy'
+        key: 'dd_mm_yyyy',
+        isMonthAfterYear: false
     }
 };
 
@@ -88,15 +91,18 @@ const allLongDateFormatArray = [
 const allShortDateFormat = {
     YYYYMMDD: {
         type: 1,
-        key: 'yyyy_mm_dd'
+        key: 'yyyy_mm_dd',
+        isMonthAfterYear: true
     },
     MMDDYYYY: {
         type: 2,
-        key: 'mm_dd_yyyy'
+        key: 'mm_dd_yyyy',
+        isMonthAfterYear: false
     },
     DDMMYYYY: {
         type: 3,
-        key: 'dd_mm_yyyy'
+        key: 'dd_mm_yyyy',
+        isMonthAfterYear: false
     }
 };
 
diff --git a/src/lib/i18n.js b/src/lib/i18n.js
index 1bf06f7f..8447966d 100644
--- a/src/lib/i18n.js
+++ b/src/lib/i18n.js
@@ -461,6 +461,18 @@ function getI18nShortMonthDayFormat(translateFn, formatTypeValue) {
     return getDateTimeFormat(translateFn, datetime.allShortDateFormat, datetime.allShortDateFormatArray, 'format.shortMonthDay', defaultShortDateFormatTypeName, datetime.defaultShortDateFormat, formatTypeValue);
 }
 
+function isLongDateMonthAfterYear(translateFn, formatTypeValue) {
+    const defaultLongDateFormatTypeName = translateFn('default.longDateFormat');
+    const type = getDateTimeFormatType(datetime.allLongDateFormat, datetime.allLongDateFormatArray, defaultLongDateFormatTypeName, datetime.defaultLongDateFormat, formatTypeValue);
+    return type.isMonthAfterYear;
+}
+
+function isShortDateMonthAfterYear(translateFn, formatTypeValue) {
+    const defaultShortDateFormatTypeName = translateFn('default.shortDateFormat');
+    const type = getDateTimeFormatType(datetime.allShortDateFormat, datetime.allShortDateFormatArray, defaultShortDateFormatTypeName, datetime.defaultShortDateFormat, formatTypeValue);
+    return type.isMonthAfterYear;
+}
+
 function getI18nLongTimeFormat(translateFn, formatTypeValue) {
     const defaultLongTimeFormatTypeName = translateFn('default.longTimeFormat');
     return getDateTimeFormat(translateFn, datetime.allLongTimeFormat, datetime.allLongTimeFormatArray, 'format.longTime', defaultLongTimeFormatTypeName, datetime.defaultLongTimeFormat, formatTypeValue);
@@ -1304,6 +1316,8 @@ export function i18nFunctions(i18nGlobal) {
         formatUnixTimeToShortTime: (userStore, unixTime, utcOffset, currentUtcOffset) => formatUnixTime(unixTime, getI18nShortTimeFormat(i18nGlobal.t, userStore.currentUserShortTimeFormat), utcOffset, currentUtcOffset),
         formatTimeToLongYearMonth: (userStore, dateTime) => formatTime(dateTime, getI18nLongYearMonthFormat(i18nGlobal.t, userStore.currentUserLongDateFormat)),
         formatTimeToShortYearMonth: (userStore, dateTime) => formatTime(dateTime, getI18nShortYearMonthFormat(i18nGlobal.t, userStore.currentUserShortDateFormat)),
+        isLongDateMonthAfterYear: (userStore) => isLongDateMonthAfterYear(i18nGlobal.t, userStore.currentUserLongDateFormat),
+        isShortDateMonthAfterYear: (userStore) => isShortDateMonthAfterYear(i18nGlobal.t, userStore.currentUserShortDateFormat),
         isLongTime24HourFormat: (userStore) => isLongTime24HourFormat(i18nGlobal.t, userStore.currentUserLongTimeFormat),
         isLongTimeMeridiemIndicatorFirst: (userStore) => isLongTimeMeridiemIndicatorFirst(i18nGlobal.t, userStore.currentUserLongTimeFormat),
         isShortTime24HourFormat: (userStore) => isShortTime24HourFormat(i18nGlobal.t, userStore.currentUserShortTimeFormat),