v9.0.0

DayPicker v9 is a major release including significant updates related to accessibility, customization and localization.

• See the updated docs at https://daypicker.dev and the upgrading Guide for more details.

Install the Latest Version

npm install react-day-picker@latest

What’s New

• Moved date-fns from peer dependencies to dependencies.
• Added support for UTC dates and Jalali Calendar.
• Enhanced accessibility to better comply with WCAG 2.1 recommendations.
• Simplified styles and new CSS variables for easier customization.
• Improved selection logic for range mode.
• New dropdown-years and dropdown-months caption layouts.
• New hideWeekdayRow and hideNavigation props.
• Updated for a complete custom components support.
• Improved typings and props for better compatibility in TypeScript strict mode.

Breaking Changes

While we tried to keep the API as stable as possible, some breaking changes were necessary to improve the library:

• The updated ARIA labels could require new translations or updated unit tests selectors.
• Custom CSS styles will likely break, due to the updated CSS classes and simplified styles.
• Custom Components have new API and may break.
• Some typings have been renamed or deprecated.
• The useInput hook has been removed. See Input fields guide for more details.
• onWeekNumberClick has been removed. Use a custom component to handle week number clicks.
• The updated build system to ESM and CommonJS could break some custom bundler.

Upgrading Guide

We prepared a Upgrading guide for help upgrading your app to v9. We welcome feedback about the upgrade process, to ensure it's smooth for everyone.

Compatibility

DayPicker v9 is compatible with React 16.8+.

Get Support and Report Issues

Get support, report issues, and provide feedback on the Discussion forums. Thanks.

New Contributors

• @grzegorzpokorski made their first contribution in #2124
• @zaaakher made their first contribution in #2137
• @ArthurGoupil made their first contribution in #2230
• @johnnysedh3lllo made their first contribution in #2252
• @xardit made their first contribution in #2254
• @dave-meyer made their first contribution in #2231
• @benasher44 made their first contribution in #2249
• @RyanCavanaugh made their first contribution in #2275
• @kesoji made their first contribution in #2281

v9.0.0-rc.6

What's Changed

• fix: remove unused ?? in getNextMonth by @RyanCavanaugh in #2275

New Contributors

• @RyanCavanaugh made their first contribution in #2275

Full Changelog: v9.0.0-rc.5...v9.0.0-rc.6

v9.0.0-rc.5

What's Changed

• build: date-fns as regular dependency by @benasher44 in #2249
• build: Update compatibility with React 16.8 by @gpbl in #2266
• fix(accessibility): remove aria-controls by @gpbl in 13c56ab
• fix(accessibility): update labels, add more tests by @gpbl in 3106ed5
• fix: add focus outline to dropdown selects by @gpbl in 8ef188b
• fix: add back Root to custom components by @gpbl in 6055e45

New Contributors

• @benasher44 made their first contribution in #2249

Full Changelog: v9.0.0-rc.4...v9.0.0-rc.5

v9.0.0-rc.4

What's Changed

• fix: focus and autofocus improvements by @gpbl in #2265
• docs: add typings to some examples by @dave-meyer in #2231

New Contributors

• @dave-meyer made their first contribution in #2231

Full Changelog: v9.0.0-rc.3...v9.0.0-rc.4

v9.0.0-rc.3

What's Changed

• feat: improve focus handling relying on data-attributes
• feat: merge hooks into one useDayPicker hook
• feat: rollback to use HTML tables and button elements by @gpbl in #2253
• deprecate not used onDay* event handlers
• consolidate use of components - now Is possible to extend all the internal components
• improve ARIA labels for week number header, today date and selected dates
• update footer to be an aria-live region
• fix: range includes disabled days by @gpbl in #2219
• fix: add type module in package.json by @ArthurGoupil in #2230
• feat: use back HTML table and Button element a button by @gpbl in #2253

New Contributors

• @ArthurGoupil made their first contribution in #2230
• @johnnysedh3lllo made their first contribution in #2252
• @xardit made their first contribution in #2254

Full Changelog: v9.0.0-rc.2...v9.0.0-rc.3

v9.0.0-rc.2

What's Changed

• CSS variables are now inside the .rdp-caledar scope
• fix: chevron orientation on RTL direction by @gpbl in #2216
• fix: gradient in RTL by @gpbl in #2217
• fix: selection modes not working as expected
• fix: dropdown navigation not including year or month

Full Changelog: v9.0.0-rc.1...v9.0.0-rc.2

v9.0.0-rc.1

What's Changed

• feat: add support for UTC, Jalali calendar by @gpbl in #2213
• refactor: simplified props, contexts by @gpbl in #2211

Full Changelog: v9.0.0-beta.5...v9.0.0-rc.1

v9.0.0-beta.5

What's Changed

• feat: remove fromDate, toDate props by @gpbl in #2197
• feat: new startMonth, endMonth prop; deprecate props by @gpbl in #2198
• docs: update upgrading guide by @gpbl in #2199

Full Changelog: v9.0.0-beta.4...v9.0.0-beta.5

v9.0.0-beta.4

What's Changed

• style(typescript): improved Selection Mode types by @gpbl in #2195
• feat: dropdown options are disabled when navigating out of calendar range by @gpbl in #2194

Full Changelog: v9.0.0-beta.3...v9.0.0-beta.4

v9.0.0-beta.3

What's Changed

• Improved classNames / Tailwind support @gpbl in #2175
• fix(style): add --rdp-dropdown-gap css variable by @gpbl in #2176
• fix: captionLayout prop not working as expected by @gpbl in #2177
• fix: add ChevronFlag interface for disabled chevrons by @gpbl in #2178
• feat: add new DayDate component by @gpbl in #2179
• feat: update range styles by @gpbl in #2180
• fix: replace data- attribute with WeekNumberFlag by @gpbl in #2181
• fix: accessibility improvements by @gpbl in #2183

Full Changelog: v9.0.0-beta.2...v9.0.0-beta.3