optimize date range display name

src/lib/utils.js

@@ -222,6 +222,26 @@ function getDateRangeByDateType(dateType, firstDayOfWeek) {
     };
 }
 
+function isDateRangeMatchFullYears(minTime, maxTime) {
+    const minDateTime = parseDateFromUnixTime(minTime).set({ second: 0, millisecond: 0 });
+    const maxDateTime = parseDateFromUnixTime(maxTime).set({ second: 59, millisecond: 999 });
+
+    const firstDayOfYear = minDateTime.clone().startOf('year');
+    const lastDayOfYear = maxDateTime.clone().endOf('year');
+
+    return firstDayOfYear.unix() === minDateTime.unix() && lastDayOfYear.unix() === maxDateTime.unix();
+}
+
+function isDateRangeMatchFullMonths(minTime, maxTime) {
+    const minDateTime = parseDateFromUnixTime(minTime).set({ second: 0, millisecond: 0 });
+    const maxDateTime = parseDateFromUnixTime(maxTime).set({ second: 59, millisecond: 999 });
+
+    const firstDayOfMonth = minDateTime.clone().startOf('month');
+    const lastDayOfMonth = maxDateTime.clone().endOf('month');
+
+    return firstDayOfMonth.unix() === minDateTime.unix() && lastDayOfMonth.unix() === maxDateTime.unix();
+}
+
 function copyObjectTo(fromObject, toObject) {
     if (!isObject(fromObject)) {
         return toObject;
@@ -563,6 +583,8 @@ export default {
     getThisYearLastUnixTime,
     getShiftedDateRange,
     getDateRangeByDateType,
+    isDateRangeMatchFullYears,
+    isDateRangeMatchFullMonths,
     copyObjectTo,
     copyArrayTo,
     appendThousandsSeparator,

src/locales/en.js

@@ -18,10 +18,12 @@ export default {
             'long-without-second': 'M/D/YYYY HH:mm',
         },
         'year': {
-            'long': 'YYYY'
+            'long': 'YYYY',
+            'short': 'YYYY'
         },
         'yearMonth': {
-            'long': 'YYYY-M'
+            'long': 'YYYY-M',
+            'short': 'YYYY-M'
         },
         'monthDay': {
             'long': 'M/D',

src/locales/zh_Hans.js

@@ -18,10 +18,12 @@ export default {
             'long-without-second': 'YYYY年M月D日 HH:mm',
         },
         'year': {
-            'long': 'YYYY年'
+            'long': 'YYYY年',
+            'short': 'YYYY'
         },
         'yearMonth': {
-            'long': 'YYYY年M月'
+            'long': 'YYYY年M月',
+            'short': 'YYYY-M'
         },
         'monthDay': {
             'long': 'M月D日',

src/views/mobile/statistics/Transaction.vue

@@ -543,11 +543,32 @@ export default {
                 }
             }
 
+            if (this.$utilities.isDateRangeMatchFullYears(query.startTime, query.endTime)) {
+                const displayStartTime = this.$utilities.formatUnixTime(query.startTime, this.$t('format.year.short'));
+                const displayEndTime = this.$utilities.formatUnixTime(query.endTime, this.$t('format.year.short'));
+
+                return displayStartTime !== displayEndTime ? `${displayStartTime} ~ ${displayEndTime}` : displayStartTime;
+            }
+
+            if (this.$utilities.isDateRangeMatchFullMonths(query.startTime, query.endTime)) {
+                const displayStartTime = this.$utilities.formatUnixTime(query.startTime, this.$t('format.yearMonth.short'));
+                const displayEndTime = this.$utilities.formatUnixTime(query.endTime, this.$t('format.yearMonth.short'));
+
+                return displayStartTime !== displayEndTime ? `${displayStartTime} ~ ${displayEndTime}` : displayStartTime;
+            }
+
             const startTimeYear = this.$utilities.getYear(this.$utilities.parseDateFromUnixTime(query.startTime));
             const endTimeYear = this.$utilities.getYear(this.$utilities.parseDateFromUnixTime(query.endTime));
 
             const displayStartTime = this.$utilities.formatUnixTime(query.startTime, this.$t('format.date.short'));
-            const displayEndTime = this.$utilities.formatUnixTime(query.endTime, this.$t(startTimeYear !== endTimeYear ? 'format.date.short' : 'format.monthDay.short'));
+            const displayEndTime = this.$utilities.formatUnixTime(query.endTime, this.$t('format.date.short'));
+
+            if (displayStartTime === displayEndTime) {
+                return displayStartTime;
+            } else if (startTimeYear === endTimeYear) {
+                const displayShortEndTime = this.$utilities.formatUnixTime(query.endTime, this.$t('format.monthDay.short'));
+                return `${displayStartTime} ~ ${displayShortEndTime}`;
+            }
 
             return `${displayStartTime} ~ ${displayEndTime}`;
         }