fix(components): [date-picker-panel]honor disabledDate on adjusted range#24085
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughPanel-date-range adds a helper that finds the nearest non-disabled date by stepping day-by-day toward a target, and uses it in linked-panel auto-adjust logic; tests were added to validate start/end auto-adjustment and convergence when intervening dates are all disabled. ChangesDatePickerPanel datetimerange
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Tip 💬 Introducing Slack Agent: The best way for teams to turn conversations into code.Slack Agent is built on CodeRabbit's deep understanding of your code, so your team can collaborate across the entire SDLC without losing context.
Built for teams:
One agent for your entire SDLC. Right inside Slack. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
commit: |
There was a problem hiding this comment.
🧹 Nitpick comments (2)
packages/components/date-picker-panel/__tests__/date-picker-panel.test.tsx (1)
1189-1225: Convergence case is well-tested.This is the important boundary test — it locks in the behavior that a fully-disabled span between
minDateandminDate+1monthcollapses both endpoints tominDaterather than leavingmaxDateon a disabled day. Consider adding a symmetric convergence test for the'max'branch (entering an end date when every prior month day is disabled) to guard against future regressions in thetype === 'max'path.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/components/date-picker-panel/__tests__/date-picker-panel.test.tsx` around lines 1189 - 1225, Add a symmetric test that verifies the 'max' convergence path: create a test like the existing one but set disabledDate (the same function) to disable dates on/after 2026-03-21, mount DatePickerPanel with v-model bound to the same value ref, locate the right-side input via pickerss (the same query used earlier) using '.el-date-range-picker__time-picker-wrap:nth-child(2) input' and simulate changing the end date to '2026-03-20' (dispatch input and change events and await nextTick()), then assert that value[0] and value[1] both format to '2026-03-20' and that disabledDate(value[0])/disabledDate(value[1]) return false; this mirrors the existing 'min' convergence test but exercises the type === "max" branch.packages/components/date-picker-panel/src/date-picker-com/panel-date-range.vue (1)
783-795: Logic is correct — convergence tominDateis handled.I traced the edge case where every day in
(minDate, minDate+1month]is disabled: whencursorreachesminDate + 1 day, theisAfter(minDate.value)check passes, the loop body subtracts one day (cursor becomesminDate, which is guaranteed non-disabled by the early-return at Line 770), then assignsadjustedMax = minDateand breaks. SoadjustedMaxis never left at the original disabledminDate+1monthvalue. Nice handling.One optional suggestion: this block is nearly identical to the
maxbranch at Lines 807–819 except for direction. Consider extracting a helper to reduce duplication:♻️ Optional helper extraction
const findNonDisabledBoundary = ( start: Dayjs, boundary: Dayjs, direction: 'backward' | 'forward' ): Dayjs => { if (!disabledDate || !disabledDate(start.toDate())) return start let cursor = start const step = direction === 'backward' ? -1 : 1 const predicate = direction === 'backward' ? () => cursor.isAfter(boundary) : () => cursor.isBefore(boundary) while (predicate()) { cursor = cursor.add(step, 'day') if (!disabledDate(cursor.toDate())) return cursor } return cursor }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/components/date-picker-panel/src/date-picker-com/panel-date-range.vue` around lines 783 - 795, The duplicated logic that searches for the nearest non-disabled date around minDate/maxDate should be extracted into a reusable helper (e.g., findNonDisabledBoundary) to remove the near-identical blocks around adjustedMax/minDate.value and the later max-branch; implement a function that accepts start Dayjs, boundary Dayjs, and direction ('backward'|'forward'), encapsulates the disabledDate checks and the while-loop cursor movement, and then replace the current loops that set adjustedMax/rightDate.value/maxDate.value and the corresponding max-side code to call this helper and assign its result.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@packages/components/date-picker-panel/__tests__/date-picker-panel.test.tsx`:
- Around line 1189-1225: Add a symmetric test that verifies the 'max'
convergence path: create a test like the existing one but set disabledDate (the
same function) to disable dates on/after 2026-03-21, mount DatePickerPanel with
v-model bound to the same value ref, locate the right-side input via pickerss
(the same query used earlier) using
'.el-date-range-picker__time-picker-wrap:nth-child(2) input' and simulate
changing the end date to '2026-03-20' (dispatch input and change events and
await nextTick()), then assert that value[0] and value[1] both format to
'2026-03-20' and that disabledDate(value[0])/disabledDate(value[1]) return
false; this mirrors the existing 'min' convergence test but exercises the type
=== "max" branch.
In
`@packages/components/date-picker-panel/src/date-picker-com/panel-date-range.vue`:
- Around line 783-795: The duplicated logic that searches for the nearest
non-disabled date around minDate/maxDate should be extracted into a reusable
helper (e.g., findNonDisabledBoundary) to remove the near-identical blocks
around adjustedMax/minDate.value and the later max-branch; implement a function
that accepts start Dayjs, boundary Dayjs, and direction ('backward'|'forward'),
encapsulates the disabledDate checks and the while-loop cursor movement, and
then replace the current loops that set
adjustedMax/rightDate.value/maxDate.value and the corresponding max-side code to
call this helper and assign its result.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 58ea04eb-32d5-4a0b-bab5-5995896ff136
📒 Files selected for processing (2)
packages/components/date-picker-panel/__tests__/date-picker-panel.test.tsxpackages/components/date-picker-panel/src/date-picker-com/panel-date-range.vue
|
🧪 Playground Preview: https://element-plus.run/?pr=24085 |
…ed-date-range # Conflicts: # packages/components/date-picker-panel/src/date-picker-com/panel-date-range.vue
|
@codex review |
|
Codex Review: Didn't find any major issues. Already looking forward to the next diff. ℹ️ About Codex in GitHubCodex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback". |
|
@LostElkByte Thanks for your contribution! ❤️ |

fix #24075
Fixes a bug where the auto-adjusted date in
datetimerangepicker could land on a disabled date.Reproduction:
2026-04-172026-02-20~2026-03-192026-03-20in the start date input2026-04-20(disabled) ❌After fix: End date adjusts to
2026-04-17(nearest valid date) ✅Summary by CodeRabbit
Bug Fixes
Tests