Skip to content

Conversation

balajis-qb
Copy link
Contributor

@balajis-qb balajis-qb commented Sep 29, 2025

Closes #5620

Description

Problem
As mentioned in the linked ticket, Currently, disabled effectively worked only for non-inline datepickers due to the native input[disabled] behavior. When rendered with inline, users could still interact with the calendar and modify dates.

Changes
The disabled prop is now applied consistently across all picker modes, including inline, ensuring the datepicker becomes non-interactive when disabled is true.

  • Days, headers, weeks, months, quarters, and years are rendered with their --disabled modifiers.
  • Hide the Calendar Navigation.
  • Keyboard navigation is a no-op while disabled.
  • Added Test cases to validate the changes
  • Added a example in the doc-site

Screenshots

image

Contribution checklist

  • I have followed the contributing guidelines.
  • I have added sufficient test coverage for my changes.
  • I have formatted my code with Prettier and checked for linting issues with ESLint for code readability.

@balajis-qb balajis-qb force-pushed the issue-5620/support-disabled branch from bfbff36 to 4a22d14 Compare September 29, 2025 12:26
- Added a `disabled` prop to the DatePicker, affecting all date selection components (Day, Month, Year, etc.) to visually indicate disabled states.
- Updated styles to reflect disabled states, including cursor and color changes.
- Modified utility functions to check for disabled dates.
- Ensured that all date-related components respect the disabled state, preventing user interaction when disabled.
- Updated tests to verify the disabled functionality across various scenarios.

This change improves accessibility and user experience by clearly indicating when the DatePicker is not interactive.

Closes Hacker0x01#5620
@balajis-qb balajis-qb force-pushed the issue-5620/support-disabled branch from 4a22d14 to 496cb6e Compare September 29, 2025 12:31
Copy link

codecov bot commented Sep 29, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.29%. Comparing base (a402024) to head (be7e61a).
⚠️ Report is 3 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #5890      +/-   ##
==========================================
+ Coverage   97.26%   97.29%   +0.02%     
==========================================
  Files          30       30              
  Lines        3443     3470      +27     
  Branches     1455     1472      +17     
==========================================
+ Hits         3349     3376      +27     
  Misses         94       94              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@martijnrusschen
Copy link
Member

can you merge this with the main branch?

@balajis-qb
Copy link
Contributor Author

sure @martijnrusschen , I'll resolve and merge, give me sometime

@balajis-qb
Copy link
Contributor Author

@martijnrusschen , Merge PR option is not showing for me. I think as I updated the PR, it's not showing. Could you please merge this PR?

@martijnrusschen martijnrusschen merged commit e2c95b0 into Hacker0x01:main Sep 30, 2025
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Disabled property doesn't work for inline DatePicker
2 participants