diff --git a/src/lib/i18n.js b/src/lib/i18n.js
index 549038e6..322010d2 100644
--- a/src/lib/i18n.js
+++ b/src/lib/i18n.js
@@ -12,14 +12,18 @@ import {
 } from './common.js';
 
 import {
+    parseDateFromUnixTime,
     formatUnixTime,
     formatTime,
     getCurrentDateTime,
+    getYear,
     getTimezoneOffset,
     getTimezoneOffsetMinutes,
     getBrowserTimezoneOffset,
     getBrowserTimezoneOffsetMinutes,
-    getDateTimeFormatType
+    getDateTimeFormatType,
+    isDateRangeMatchFullYears,
+    isDateRangeMatchFullMonths
 } from './datetime.js';
 
 import {
@@ -584,6 +588,53 @@ function getAllDateRanges(includeCustom, translateFn) {
     return allDateRanges;
 }
 
+function getDateRangeDisplayName(userStore, dateType, startTime, endTime, translateFn) {
+    if (dateType === datetime.allDateRanges.All.type) {
+        return translateFn(datetime.allDateRanges.All.name);
+    }
+
+    for (let dateRangeField in datetime.allDateRanges) {
+        if (!Object.prototype.hasOwnProperty.call(datetime.allDateRanges, dateRangeField)) {
+            continue;
+        }
+
+        const dateRange = datetime.allDateRanges[dateRangeField];
+
+        if (dateRange && dateRange.type !== datetime.allDateRanges.Custom.type && dateRange.type === dateType && dateRange.name) {
+            return translateFn(dateRange.name);
+        }
+    }
+
+    if (isDateRangeMatchFullYears(startTime, endTime)) {
+        const displayStartTime = formatUnixTime(startTime, getI18nShortYearFormat(translateFn, userStore.currentUserShortDateFormat));
+        const displayEndTime = formatUnixTime(endTime, getI18nShortYearFormat(translateFn, userStore.currentUserShortDateFormat));
+
+        return displayStartTime !== displayEndTime ? `${displayStartTime} ~ ${displayEndTime}` : displayStartTime;
+    }
+
+    if (isDateRangeMatchFullMonths(startTime, endTime)) {
+        const displayStartTime = formatUnixTime(startTime, getI18nShortYearMonthFormat(translateFn, userStore.currentUserShortDateFormat));
+        const displayEndTime = formatUnixTime(endTime, getI18nShortYearMonthFormat(translateFn, userStore.currentUserShortDateFormat));
+
+        return displayStartTime !== displayEndTime ? `${displayStartTime} ~ ${displayEndTime}` : displayStartTime;
+    }
+
+    const startTimeYear = getYear(parseDateFromUnixTime(startTime));
+    const endTimeYear = getYear(parseDateFromUnixTime(endTime));
+
+    const displayStartTime = formatUnixTime(startTime, getI18nShortDateFormat(translateFn, userStore.currentUserShortDateFormat));
+    const displayEndTime = formatUnixTime(endTime, getI18nShortDateFormat(translateFn, userStore.currentUserShortDateFormat));
+
+    if (displayStartTime === displayEndTime) {
+        return displayStartTime;
+    } else if (startTimeYear === endTimeYear) {
+        const displayShortEndTime = formatUnixTime(endTime, getI18nShortMonthDayFormat(translateFn, userStore.currentUserShortDateFormat));
+        return `${displayStartTime} ~ ${displayShortEndTime}`;
+    }
+
+    return `${displayStartTime} ~ ${displayEndTime}`;
+}
+
 function getAllStatisticsChartDataTypes(translateFn) {
     const allChartDataTypes = [];
 
@@ -963,6 +1014,7 @@ export function i18nFunctions(i18nGlobal) {
         getAllCurrencies: () => getAllCurrencies(i18nGlobal.t),
         getAllWeekDays: () => getAllWeekDays(i18nGlobal.t),
         getAllDateRanges: (includeCustom) => getAllDateRanges(includeCustom, i18nGlobal.t),
+        getDateRangeDisplayName: (userStore, dateType, startTime, endTime) => getDateRangeDisplayName(userStore, dateType, startTime, endTime, i18nGlobal.t),
         getAllStatisticsChartDataTypes: () => getAllStatisticsChartDataTypes(i18nGlobal.t),
         getAllStatisticsSortingTypes: () => getAllStatisticsSortingTypes(i18nGlobal.t),
         getAllTransactionEditScopeTypes: () => getAllTransactionEditScopeTypes(i18nGlobal.t),
diff --git a/src/views/desktop/statistics/TransactionPage.vue b/src/views/desktop/statistics/TransactionPage.vue
index b21b34d7..3b2780c8 100644
--- a/src/views/desktop/statistics/TransactionPage.vue
+++ b/src/views/desktop/statistics/TransactionPage.vue
@@ -229,12 +229,8 @@ import datetimeConstants from '@/consts/datetime.js';
 import statisticsConstants from '@/consts/statistics.js';
 import { getNameByKeyValue, limitText, formatPercent } from '@/lib/common.js'
 import {
-    parseDateFromUnixTime,
-    getYear,
     getShiftedDateRange,
-    getDateRangeByDateType,
-    isDateRangeMatchFullYears,
-    isDateRangeMatchFullMonths
+    getDateRangeByDateType
 } from '@/lib/datetime.js';
 
 import {
@@ -553,50 +549,7 @@ export default {
                 return this.$t(this.allDateRanges.All.name);
             }
 
-            if (query.dateType === this.allDateRanges.All.type) {
-                return this.$t(this.allDateRanges.All.name);
-            }
-
-            for (let dateRangeField in this.allDateRanges) {
-                if (!Object.prototype.hasOwnProperty.call(this.allDateRanges, dateRangeField)) {
-                    continue;
-                }
-
-                const dateRange = this.allDateRanges[dateRangeField];
-
-                if (dateRange && dateRange.type !== this.allDateRanges.Custom.type && dateRange.type === query.dateType && dateRange.name) {
-                    return this.$t(dateRange.name);
-                }
-            }
-
-            if (isDateRangeMatchFullYears(query.startTime, query.endTime)) {
-                const displayStartTime = this.$locale.formatUnixTimeToShortYear(this.userStore, query.startTime);
-                const displayEndTime = this.$locale.formatUnixTimeToShortYear(this.userStore, query.endTime);
-
-                return displayStartTime !== displayEndTime ? `${displayStartTime} ~ ${displayEndTime}` : displayStartTime;
-            }
-
-            if (isDateRangeMatchFullMonths(query.startTime, query.endTime)) {
-                const displayStartTime = this.$locale.formatUnixTimeToShortYearMonth(this.userStore, query.startTime);
-                const displayEndTime = this.$locale.formatUnixTimeToShortYearMonth(this.userStore, query.endTime);
-
-                return displayStartTime !== displayEndTime ? `${displayStartTime} ~ ${displayEndTime}` : displayStartTime;
-            }
-
-            const startTimeYear = getYear(parseDateFromUnixTime(query.startTime));
-            const endTimeYear = getYear(parseDateFromUnixTime(query.endTime));
-
-            const displayStartTime = this.$locale.formatUnixTimeToShortDate(this.userStore, query.startTime);
-            const displayEndTime = this.$locale.formatUnixTimeToShortDate(this.userStore, query.endTime);
-
-            if (displayStartTime === displayEndTime) {
-                return displayStartTime;
-            } else if (startTimeYear === endTimeYear) {
-                const displayShortEndTime = this.$locale.formatUnixTimeToShortMonthDay(this.userStore, query.endTime);
-                return `${displayStartTime} ~ ${displayShortEndTime}`;
-            }
-
-            return `${displayStartTime} ~ ${displayEndTime}`;
+            return this.$locale.getDateRangeDisplayName(this.userStore, query.dateType, query.startTime, query.endTime);
         },
         clickPieChartItem(item) {
             this.$router.push(this.getItemLinkUrl(item));
diff --git a/src/views/mobile/statistics/TransactionPage.vue b/src/views/mobile/statistics/TransactionPage.vue
index 7083703c..9bc6acdf 100644
--- a/src/views/mobile/statistics/TransactionPage.vue
+++ b/src/views/mobile/statistics/TransactionPage.vue
@@ -261,12 +261,8 @@ import datetimeConstants from '@/consts/datetime.js';
 import statisticsConstants from '@/consts/statistics.js';
 import { getNameByKeyValue, limitText, formatPercent } from '@/lib/common.js'
 import {
-    parseDateFromUnixTime,
-    getYear,
     getShiftedDateRange,
-    getDateRangeByDateType,
-    isDateRangeMatchFullYears,
-    isDateRangeMatchFullMonths
+    getDateRangeByDateType
 } from '@/lib/datetime.js';
 
 export default {
@@ -562,50 +558,7 @@ export default {
                 return this.$t(this.allDateRanges.All.name);
             }
 
-            if (query.dateType === this.allDateRanges.All.type) {
-                return this.$t(this.allDateRanges.All.name);
-            }
-
-            for (let dateRangeField in this.allDateRanges) {
-                if (!Object.prototype.hasOwnProperty.call(this.allDateRanges, dateRangeField)) {
-                    continue;
-                }
-
-                const dateRange = this.allDateRanges[dateRangeField];
-
-                if (dateRange && dateRange.type !== this.allDateRanges.Custom.type && dateRange.type === query.dateType && dateRange.name) {
-                    return this.$t(dateRange.name);
-                }
-            }
-
-            if (isDateRangeMatchFullYears(query.startTime, query.endTime)) {
-                const displayStartTime = this.$locale.formatUnixTimeToShortYear(this.userStore, query.startTime);
-                const displayEndTime = this.$locale.formatUnixTimeToShortYear(this.userStore, query.endTime);
-
-                return displayStartTime !== displayEndTime ? `${displayStartTime} ~ ${displayEndTime}` : displayStartTime;
-            }
-
-            if (isDateRangeMatchFullMonths(query.startTime, query.endTime)) {
-                const displayStartTime = this.$locale.formatUnixTimeToShortYearMonth(this.userStore, query.startTime);
-                const displayEndTime = this.$locale.formatUnixTimeToShortYearMonth(this.userStore, query.endTime);
-
-                return displayStartTime !== displayEndTime ? `${displayStartTime} ~ ${displayEndTime}` : displayStartTime;
-            }
-
-            const startTimeYear = getYear(parseDateFromUnixTime(query.startTime));
-            const endTimeYear = getYear(parseDateFromUnixTime(query.endTime));
-
-            const displayStartTime = this.$locale.formatUnixTimeToShortDate(this.userStore, query.startTime);
-            const displayEndTime = this.$locale.formatUnixTimeToShortDate(this.userStore, query.endTime);
-
-            if (displayStartTime === displayEndTime) {
-                return displayStartTime;
-            } else if (startTimeYear === endTimeYear) {
-                const displayShortEndTime = this.$locale.formatUnixTimeToShortMonthDay(this.userStore, query.endTime);
-                return `${displayStartTime} ~ ${displayShortEndTime}`;
-            }
-
-            return `${displayStartTime} ~ ${displayEndTime}`;
+            return this.$locale.getDateRangeDisplayName(this.userStore, query.dateType, query.startTime, query.endTime);
         },
         clickPieChartItem(item) {
             this.f7router.navigate(this.getItemLinkUrl(item));