fix(components): [date-picker] keep `disabled-date` reactive in panels by lazerg · Pull Request #24708 · element-plus/element-plus

lazerg · 2026-08-11T06:14:53Z

Please make sure these boxes are checked before submitting your PR, thank you!

Make sure you follow contributing guide English | (中文 | Español | Français).
Make sure you are merging your commits to dev branch.
Add some descriptions and refer to relative issues for your PR.

panel-date-range.vue and use-panel-date-range.ts both pull disabledDate off pickerBase.props by destructuring, which snapshots the function once and drops reactivity. Replacing a disabled-date at runtime on a range picker therefore keeps the old predicate forever. Switched both to toRef(pickerBase.props, 'disabledDate'), the same thing the neighbouring format / shortcuts / defaultValue lines already do.

Extended the same fix to panel-date-pick.vue, panel-month-range.vue, panel-year-range.vue, and panel-quarter-range.vue, which had the identical destructure bug and were flagged in review.

Summary by CodeRabbit

Bug Fixes
- Date picker panels now immediately reflect changes to date-disabling rules.
- Updated date, month, quarter, and year selections consistently honor the latest disabled-date settings.
Tests
- Added coverage verifying reactive disabled-date updates across all supported date picker types.

github-actions · 2026-08-11T06:15:02Z

coderabbitai · 2026-08-11T06:15:36Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: bd850719-4766-4661-b811-7d22819489b9

📥 Commits

Reviewing files that changed from the base of the PR and between 3d7be0d and 9078c0e.

📒 Files selected for processing (1)

packages/components/date-picker-panel/__tests__/date-picker-panel.test.tsx

📝 Walkthrough

Walkthrough

The date-picker panels now keep disabledDate as a reactive reference to picker props. Validation, normalization, navigation, and date searching use its current value. Parameterized tests verify updates across all supported picker types.

Changes

Date-picker disabled-date reactivity

Layer / File(s)	Summary
Date-picker panel callback reactivity `packages/components/date-picker-panel/src/date-picker-com/panel-date-pick.vue`	The main panel reads the current `disabledDate` callback during selection, confirmation, “now” handling, input validation, normalization, and keyboard navigation.
Date-range callback reactivity `packages/components/date-picker-panel/src/composables/use-panel-date-range.ts`, `packages/components/date-picker-panel/src/date-picker-com/panel-date-range.vue`, `packages/components/date-picker-panel/src/date-picker-com/panel-month-range.vue`, `packages/components/date-picker-panel/src/date-picker-com/panel-quarter-range.vue`, `packages/components/date-picker-panel/src/date-picker-com/panel-year-range.vue`	Date-range panels use `toRef` for `disabledDate` and dereference it during date, month, quarter, and year validation and normalization.
Runtime callback regression tests `packages/components/date-picker-panel/__tests__/date-picker-panel.test.tsx`	Parameterized tests verify that changing `disabledDate` updates disabled cells for all supported picker types.

Estimated code review effort: 2 (Simple) | ~10 minutes

Mergeability Score: ⚪ Minimal · up to 9078c

The change keeps runtime disabled-date updates reactive across date-picker panels. No actionable merge-blocking risk remains beyond normal checks and review.

Possibly related PRs

element-plus/element-plus#24085: Modifies overlapping panel-date-range.vue disabled-date handling and range adjustment logic.
element-plus/element-plus#24490: Modifies related date-picker panels and tests around disabledDate and quarter-picker behavior.

Suggested reviewers: lostelkbyte, rzzf, btea

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The changes address issue `#24697` by preserving runtime disabled-date updates across the affected date-picker panels and adding regression coverage.
Out of Scope Changes check	✅ Passed	All code and test changes support the linked issue and the stated goal of keeping disabled-date reactive in date-picker panels.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title clearly describes the main fix: preserving reactive disabled-date behavior in date-picker panels.
Description check	✅ Passed	The description completes the template, explains the reactivity bug and fix, and references related issues.

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

pkg-pr-new · 2026-08-11T06:16:15Z

Open in StackBlitz

pnpm add https://pkg.pr.new/element-plus@24708

npm i https://pkg.pr.new/element-plus@24708

yarn add https://pkg.pr.new/element-plus@24708.tgz

commit: a632a61

github-actions · 2026-08-11T06:17:21Z

Size Change: +131 B (+0.01%)

Total Size: 1.45 MB

📦 View Changed

Filename	Size	Change
`dist/element-plus/dist/index.full.js`	418 kB	+27 B (+0.01%)
`dist/element-plus/dist/index.full.min.js`	293 kB	+41 B (+0.01%)
`dist/element-plus/dist/index.full.min.mjs`	285 kB	+24 B (+0.01%)
`dist/element-plus/dist/index.full.mjs`	408 kB	+39 B (+0.01%)

ℹ️ View Unchanged

Filename	Size
`dist/element-plus/dist/index.css`	47.6 kB

_{compressed-size-action}

github-actions · 2026-08-11T06:22:41Z

🧪 Playground Preview: https://element-plus.run/?pr=24708
Please comment the example via this playground if needed.

🔖 Commit: a632a618ebf1314678889a56e9732dad3057304e

patienry

Other pickers also have this issue (e.g. type="date"). It would be better to make the change consistently across all picker types.

lazerg · 2026-08-11T09:44:37Z

Good catch, thanks. Extended it.

panel-date-pick.vue had the same destructure, so date, datetime, week, month, year and quarter were all affected. The month, year and quarter range panels had it too. All of them now use toRef(pickerBase.props, 'disabledDate').

Added two regression tests: type="date" in date-picker.test.ts and type="datetime" in date-time-picker.test.tsx. Both fail on dev and pass with the change. Full unit suite is green (162 files, 2602 tests).

patienry

Thank you!

github-actions · 2026-08-13T03:01:39Z

@lazerg Thanks for your contribution! ❤️

fix(components): [date-picker] keep range panel disabled-date reactive

c109afe

pull-request-triage Bot assigned lazerg Aug 11, 2026

pull-request-triage Bot added the Needs Review label Aug 11, 2026

github-actions Bot added the Contribution::Community label Aug 11, 2026

patienry reviewed Aug 11, 2026

View reviewed changes

fix(components): [date-picker] keep disabled-date reactive on all types

3d7be0d

lazerg changed the title ~~fix(components): [date-picker] keep range panel disabled-date reactive~~ fix(components): [date-picker] keep disabled-date reactive across picker panels Aug 11, 2026

github-actions Bot added the CommitMessage::Unqualified Unqualified commit message label Aug 11, 2026

lazerg changed the title ~~fix(components): [date-picker] keep disabled-date reactive across picker panels~~ fix(components): [date-picker] keep disabled-date reactive in panels Aug 11, 2026

github-actions Bot removed the CommitMessage::Unqualified Unqualified commit message label Aug 11, 2026

btea changed the title ~~fix(components): [date-picker] keep disabled-date reactive in panels~~ fix(components): [date-picker] keep disabled-date reactive in panels Aug 12, 2026

btea approved these changes Aug 12, 2026

View reviewed changes

patienry added 2 commits August 13, 2026 10:19

test: adjust the test cases

9078c0e

Merge branch 'dev' into fix/24697-disabled-date-reactivity

a632a61

patienry approved these changes Aug 13, 2026

View reviewed changes

patienry merged commit 6988f96 into element-plus:dev Aug 13, 2026
17 checks passed

element-bot mentioned this pull request Aug 21, 2026

D2M #24761

Merged

3 tasks

Navigation Menu

Uh oh!

fix(components): [date-picker] keep `disabled-date` reactive in panels - #24708

fix(components): [date-picker] keep `disabled-date` reactive in panels#24708
patienry merged 4 commits into
element-plus:devfrom
lazerg:fix/24697-disabled-date-reactivity

lazerg commented Aug 11, 2026 •

edited by patienry

Loading

Uh oh!

github-actions Bot commented Aug 11, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Aug 11, 2026 •

edited

Loading

Walkthrough

Changes

Uh oh!

pkg-pr-new Bot commented Aug 11, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Aug 11, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Aug 11, 2026 •

edited

Loading

Uh oh!

patienry left a comment

Uh oh!

lazerg commented Aug 11, 2026

Uh oh!

patienry left a comment

Uh oh!

Uh oh!

github-actions Bot commented Aug 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

lazerg commented Aug 11, 2026 • edited by patienry Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

github-actions Bot commented Aug 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Aug 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Uh oh!

pkg-pr-new Bot commented Aug 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Aug 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Aug 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

patienry left a comment

Choose a reason for hiding this comment

Uh oh!

lazerg commented Aug 11, 2026

Uh oh!

patienry left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Aug 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

lazerg commented Aug 11, 2026 •

edited by patienry

Loading

github-actions Bot commented Aug 11, 2026 •

edited

Loading

coderabbitai Bot commented Aug 11, 2026 •

edited

Loading

pkg-pr-new Bot commented Aug 11, 2026 •

edited

Loading

github-actions Bot commented Aug 11, 2026 •

edited

Loading

github-actions Bot commented Aug 11, 2026 •

edited

Loading