the order of year and month in the date picker is based on the order in long date format set by the user

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);
         },

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

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);
         },

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

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

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),