v9.0.0 released

[gpbl]

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 docs(website): fix wrong link to the react.js project website #2124
• @zaaakher made their first contribution in docs: fix date-fns locale link in localization.mdx #2137
• @ArthurGoupil made their first contribution in fix: Add type module in package.json #2230
• @johnnysedh3lllo made their first contribution in docs: updated styling.mdx #2252
• @xardit made their first contribution in docs: update selection-modes.mdx #2254
• @dave-meyer made their first contribution in docs: add typings to some examples #2231
• @benasher44 made their first contribution in build: date-fns as regular dependency #2249
• @RyanCavanaugh made their first contribution in fix: remove unused ?? in getNextMonth #2275

Full Changelog: v8.10.1...v9.0.0

---

This discussion was created from the release v9.0.0.

[AhmedBaset]

Great job @gpbl

Too many react-day-picker consumers use it via the Shadcn <Calendar />. Would you mind opening a PR there migrating from v8 to v9? so v8 users can copy the updated component.

I tried migration from 8 to 9rc-5 a couple days ago and had difficult experience with no success at the end. You are the best one know what has changed.

[gpbl]

I tried migration from 8 to 9rc-5 a couple days ago and had difficult experience with no success at the end. You are the best one know what has changed.

Hi @AhmedBaset, thanks for trying it out - do you had difficulties upgrading react-day-picker used via shadcn/ui or with the calendar itself?

Too many react-day-picker consumers use it via the Shadcn <Calendar />. Would you mind opening a PR there migrating from v8 to v9? so v8 users can copy the updated component.

Their calendar.tsx is using components and class names that have been removed. We may reintroduce (and deprecate) them to make it compatible with their code, but I cannot guarantee the style would look the same.

[TheMikeyRoss]

Im actually still stuck trying to migrate to v9 with the same look as the shadcn/ui look.

What replaced table classname?

Could you kindly remake the shadcn calendar but with the new styling names and classnames and components of v9? it will help a lot of people, and it will also help update the current one in shadcn to v9

[AhmedBaset]

The difficulty was in migrating the calendar.tsx file similar to @TheMikeyRoss experience, what's the replacement of nav_button, and many more classNames. I often look at the source code to see what's been changed but I got stuck in #2161 500+ changed file and the upgrade guide doesn't mention all of these.

[gpbl]

Also a hijri feature would be nice

@TheMikeyRoss We need to rely on third-party packages for supporting other calendars, as we do for date-fns-jalali.

In the JS ecosystem see only https://www.npmjs.com/package/hijri-date and its HijriDate.js.

I have no experience with this calendar - is an updated Date constructor as in HijriDate enough? If yes, then this should work:

import HijriDate from 'hijri-date';

<DayPicker dateLib={{ Date: HijriDate }} />

[efgomes]

what is the new class to replace the old nav_button?

[gpbl]

what is the new class to replace the old nav_button?

Hi @efgomes, thanks for your feedback.

We just released a patch that should make the upgrade easier.

Try to install 9.0.1 and see if the updated docs can help:

https://daypicker.dev/upgrading#3-update-the-class-names

npm install react-day-picker@latest

[TheMikeyRoss]

@gpbl I think you'll be bombarded with devs having issues specifically with the incompatible classnames with shadcn-ui 😅

I think the best course of action is to make a code snippet of the new way to replicate shadcn-ui/calendar and pin it in the discussion board.

I wish I could help with that but I'm also stuck with nav buttons, table, rows, cells, and pretty much 60% of the deprecated classes.

[zaaakher]

@gpbl shadcn-ui isn't really a package, and it has no dependencies. It's simply a collection of copyable components (or automated copy via shadcn cli).
So someone can go to the calendar component and follow the manual instructions to create the Calendar component

And that install command will use the latest version of react-day-picker. And if you scroll down you'll see the code to copy, and when someone copies it they'll see ts warnings and issues due to the v9 breaking changes of classes.

So all we have to do to mitigate people having issues is to make a PR to shadcn to update the code snippet to work for v9. (while keeping the looks and feels identical) in this file

[AhmedBaset]

I opened a WIP PR shadcn-ui/ui#4371

[gpbl]

Thanks here for the insights about shadcn-ui. It seems the missing version in their install instructions is giving trouble to many.

Isn't easier fix their doc to include the version of the package?

- npm install react-day-picker
+ npm install react-day-picker@8

[TheMikeyRoss]

I'd consider that a temporary bandaid. someone running a a tool like node-check-update might bumb rdp to v9 and they're back to square one.

The unfortuante thing about shadcn is that the maintainer shows up once a week. As you can see there's almost 600 PRs. So even if we make a PR for the npm install react-day-picker@8 it won't be merged for some time. So we might as well just migrate the whole component to v9

[gpbl]

I'd consider that a temporary bandaid. someone running a a tool like node-check-update might bumb rdp to v9 and they're back to square one.

Breaking change between mayor versions are expected.

shadcn-ui uses third party packages in their examples, but they miss saying which version is their code compatible to. IMHO it is just that.

[TheMikeyRoss]

It seems the day_button classes overwrite selected

@AhmedBaset Are you facing something similar? where the selected day changes to light gray when you hover on it? (from shadcn)

[gpbl]

@TheMikeyRoss I solved it by simply replacing the DayButton component with a custom one. And you can use props.modifiers.selected to conditionally render different styles when a day is selected.

Love this solution, thanks for sharing.

Is this problem related to this line in style.css?

react-day-picker/src/style.css

Lines 251 to 253 in 330ae8e

	.rdp-selected .rdp-day_button {
	border: var(--rdp-selected-border);
	}

I understand targeting a child just via classnames is creating the issue here.

[zaaakher]

Is this problem related to this line in style.css?

It could be. But I don't understand why it would be.

I'd summarize the issue as "The hover styles of day_button overwrite the styles of selected"

[gpbl]

🤔 Then the issue may be the "button reset":

react-day-picker/src/style.css

Lines 75 to 84 in 330ae8e

	/* Reset buttons */
	.rdp-root button {
	border: none;
	background: none;
	padding: 0;
	margin: 0;
	cursor: pointer;
	font: inherit;
	color: inherit;
	}

Let see if other meets similar issues. I will keep an eye open on this, thanks again for reporting.

[zaaakher]

Then the issue may be the "button reset":

Ah that looks more likely.

Let see if other meets similar issues. I will keep an eye open on this, thanks again for reporting.

Great, thanks for all your work 👍

[berkerdemirer]

I understand targeting a child just via classnames is creating the issue here.

I am currently, having this issue. If you would like to have range select as same as in provided in the docs using tailwind and classNames approach, it won't work. Maybe I am missing something here but how can you target .range_start .day_button with only given range_start classname key? Due to that, when you give background color to range_start it will actually override whatever you add for select.