Skip to content

fix(DatePicker): 修复DateRangePicker选择时的交互问题 #6143

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

fix(DatePicker): 修复DateRangePicker选择时的交互问题 #6143

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions packages/components/date-picker/DateRangePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,11 +179,11 @@ export default defineComponent({
}

// 首次点击不关闭、确保两端都有有效值并且无时间选择器时点击后自动关闭
if (!isFirstValueSelected.value || !activeIndex.value) {
if (!isFirstValueSelected.value) {
Copy link

Copilot AI Nov 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The condition was simplified by removing || !activeIndex.value, but this changes the behavior when activeIndex.value is 0. Previously, when activeIndex.value was 0 (selecting start date), the condition would evaluate to true even if isFirstValueSelected.value was true, keeping the popup open. Now it will close the popup. Verify this behavior change is intentional, especially for the start date selection flow where activeIndex.value is 0.

Suggested change
if (!isFirstValueSelected.value) {
if (!isFirstValueSelected.value || !activeIndex.value) {

Copilot uses AI. Check for mistakes.
Copy link
Contributor Author

@mikasayw mikasayw Nov 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

!activeIndex.value判断时，如果先选择endDate后选择startDate，会让使用者再次选择endDate，但此时使用者已经选择了完整了日期区间。这里不能使用activeIndex下标去判断，因为用户选择的先后行为是不可预期的。
186 行改为isFirstValueSelected.value = nextValue.some((v) => !!v)，那么不管使用者是先选择endDate or startDate，下次点击都会命中关闭逻辑。
@Wesley-0808

let nextIndex = notValidIndex;
if (nextIndex === -1) nextIndex = activeIndex.value ? 0 : 1;
activeIndex.value = nextIndex as 0 | 1;
isFirstValueSelected.value = !!nextValue[0];
isFirstValueSelected.value = nextValue.some((v) => !!v);
Copy link

Copilot AI Nov 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The logic change from !!nextValue[0] to nextValue.some((v) => !!v) fundamentally changes the meaning of isFirstValueSelected. The variable name suggests it tracks whether the first value has been selected, but now it checks if any value is selected. This creates a semantic mismatch. When selecting the end date first (index 1), this will set isFirstValueSelected to true even though the first position (index 0) is empty. This could break the logic at lines 160-162 that uses !isFirstValueSelected.value to determine if it's a second modification, potentially preventing proper start/end date validation.

Suggested change
isFirstValueSelected.value = nextValue.some((v) => !!v);
isFirstValueSelected.value = !!nextValue[0];

Copilot uses AI. Check for mistakes.
Copy link
Contributor Author

@mikasayw mikasayw Nov 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tdesign-vue-next/packages/components/date-picker/DateRangePicker.tsx

Lines 156 to 162 in 8f191aa

// 当两端都有有效值时更改 value
if (notValidIndex === -1 && nextValue.length === 2) {
// 二次修改时当其中一侧不符合上次区间规范时，清空另一侧数据
if (
!isFirstValueSelected.value &&
parseToDayjs(nextValue[0], formatRef.value.format).isAfter(parseToDayjs(nextValue[1], formatRef.value.format))
) {

这里的先行逻辑是startDate endDate都满足有效值，nextValue.some((v) => !!v)并不会影响此地方的逻辑。
popupVisible关闭时都会重置isFirstValueSelected.value = false，二次修改日期区间的首次点击也会验证此地方值的合理性逻辑。

Copy link
Collaborator

@Wesley-0808 Wesley-0808 Nov 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

copilot按变量名来理解了，不过确实，改了之后的 不符合变量名的语义

Copy link
Contributor Author

@mikasayw mikasayw Nov 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这么一想语意确实有歧义，我看到 isFirstValueSelected的当时注释写的是// 记录面板点击次数，两次后才自动关闭

} else {
popupVisible.value = false;
}
Expand Down Expand Up @@ -294,11 +294,11 @@ export default defineComponent({
const notValidIndex = nextValue.findIndex((v) => !v || !isValidDate(v, formatRef.value.format));

// 首次点击不关闭、确保两端都有有效值并且无时间选择器时点击后自动关闭
if (!isFirstValueSelected.value || !activeIndex.value) {
if (!isFirstValueSelected.value) {
let nextIndex = notValidIndex;
if (nextIndex === -1) nextIndex = activeIndex.value ? 0 : 1;
activeIndex.value = nextIndex as 0 | 1;
isFirstValueSelected.value = !!nextValue[0];
isFirstValueSelected.value = nextValue.some((v) => !!v);
} else if (nextValue.length === 2) {
popupVisible.value = false;
}
Expand Down
Loading