From 225987571cc2e0e3b563df7cedbd1d2986a240f2 Mon Sep 17 00:00:00 2001 From: Uyarn Date: Tue, 31 Dec 2024 16:39:49 +0800 Subject: [PATCH 1/2] fix(DatePicker): optimize date range picker panel initial render result --- src/date-picker/DateRangePickerPanel.tsx | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/src/date-picker/DateRangePickerPanel.tsx b/src/date-picker/DateRangePickerPanel.tsx index 6e90023345..39068579ca 100644 --- a/src/date-picker/DateRangePickerPanel.tsx +++ b/src/date-picker/DateRangePickerPanel.tsx @@ -1,4 +1,4 @@ -import { defineComponent, computed, ref } from 'vue'; +import { defineComponent, computed, ref, onMounted } from 'vue'; import dayjs from 'dayjs'; import isFunction from 'lodash/isFunction'; import isArray from 'lodash/isArray'; @@ -56,6 +56,22 @@ export default defineComponent({ const hoverValue = ref([]); const activeIndex = computed(() => (isFirstValueSelected.value ? 1 : 0)); + onMounted(() => { + if (value.value.length === 2 && !props.enableTimePicker) { + // 确保右侧面板月份比左侧大 避免两侧面板月份一致 + const nextMonth = value.value.map((v: string) => parseToDayjs(v, formatRef.value.format).month()); + year.value = value.value.map((v: string) => parseToDayjs(v, formatRef.value.valueType).year()); + if (year.value[0] === year.value[1] && nextMonth[0] === nextMonth[1]) { + nextMonth[0] === 11 ? (nextMonth[0] -= 1) : (nextMonth[1] += 1); + } + month.value = nextMonth; + // 月份季度选择时需要确保右侧面板年份比左侧大 + if ((props.mode === 'month' || props.mode === 'quarter') && year.value[0] === year.value[1]) { + year.value = [year.value[0], year.value[0] + 1]; + } + } + }); + // 日期 hover function onCellMouseEnter(date: Date) { isHoverCell.value = true; From 4a93a61dfc61418b0bcbf08916a2c0b183b15bf5 Mon Sep 17 00:00:00 2001 From: Uyarn Date: Tue, 31 Dec 2024 16:42:44 +0800 Subject: [PATCH 2/2] fix(DatePicker): optimize date range picker panel initial render result --- src/date-picker/DateRangePickerPanel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/date-picker/DateRangePickerPanel.tsx b/src/date-picker/DateRangePickerPanel.tsx index 39068579ca..f96067d6a9 100644 --- a/src/date-picker/DateRangePickerPanel.tsx +++ b/src/date-picker/DateRangePickerPanel.tsx @@ -66,7 +66,7 @@ export default defineComponent({ } month.value = nextMonth; // 月份季度选择时需要确保右侧面板年份比左侧大 - if ((props.mode === 'month' || props.mode === 'quarter') && year.value[0] === year.value[1]) { + if (['month', 'quarter'].includes(props.mode) && year.value[0] === year.value[1]) { year.value = [year.value[0], year.value[0] + 1]; } }