[bug]: react-day-picker 9.0.0 release screws up Calendar component

[gregpr07]

Describe the bug

Currently, the component looks like this.

Fix:
You can currently fix this by downgrading react-day-picker to version 8.^

Affected component/components

Calendar, Date Picker, ...

How to reproduce

1. Install Calendar component

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Browsers

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[Cheveniko]

Easiest solution right now is to downgrade to 8.10.1.
The react-day-picker team has already been notified of this issue in the v9.0.0 release announcement

[grzegorzpokorski]

Here are my adjusted styles for the Calendar component:
https://github.com/grzegorzpokorski/calendar-shadcnnui/blob/main/src/components/ui/calendar.tsx.
Maybe someone will have more time to review them and improve.

The most intriguing aspect is the change in the structure of this component, particularly the navigation between months. I am not sure if the current design is appropriate (playing with z-index).

[efgomes]

Here are my adjusted styles for the Calendar component: https://github.com/grzegorzpokorski/calendar-shadcnnui/blob/main/src/components/ui/calendar.tsx. Maybe someone will have more time to review them and improve.

The most intriguing aspect is the change in the structure of this component, particularly the navigation between months. I am not sure if the current design is appropriate (playing with z-index).

OK, I'm using your code. When making adjustments to my code and not finding another solution for positioning the navigation buttons, I used the z-index

[NamorAgro]

same bug ((

[NamorAgro]

Easiest solution right now is to downgrade to 8.10.1. The react-day-picker team has already been notified of this issue in the v9.0.0 release announcement

npx shadcn-ui@8.10.1 add calendar
gives error, no such version matching

[olsio]

Easiest solution right now is to downgrade to 8.10.1. The react-day-picker team has already been notified of this issue in the v9.0.0 release announcement

npx shadcn-ui@8.10.1 add calendar gives error, no such version matching

The dependency is on react-day-picker. Go to your package.json and set the 8.10.1 there and then run npm install

[flixlix]

fixed here #4421

[huybuidac]

While waiting for the update, you can try this.

https://shadcn-datetime-picker-pro.vercel.app/
https://github.com/huybuidac/shadcn-datetime-picker

[kamami]

Any update when the latest version of react-day-picker will be supported?

[kulterryan]

any update on this?

[olsio]

It will never get fixed. There are 850 open PRs with zero movement on maintenance. So you can only fix it for your own project and move on. I stopped contributing a while back. Nothing gets accepted.

[AnatoliiCubex]

Half a year and 9.*.* still mess styles of 8.*.*

[junwen-k]

Hi everyone! 👋

I’m excited to share an extension library I’ve built for shadcn/ui, which includes a DatePicker reusable component. The calendar styling is updated and fixed, supporting "react-day-picker": ^9. It also supports additional features like Dropdown Layout.

You can check out the DatePicker component here: https://ui-x.junwen-k.dev/docs/components/date-picker

It also supports segmented date inputs using timescape. 🚀

The library also includes other handy components designed to enhance developer productivity. If you find it helpful, I’d be thrilled if you could leave a star—it really helps others discover the project. I’d love to hear your feedback or suggestions, so feel free to share your thoughts! 😊

[rylder]

I found something here: https://date-picker.luca-felix.com/
The guy did a beautiful job.
I hope it helps you too.

[huybuidac]

I found something here: https://date-picker.luca-felix.com/ The guy did a beautiful job. I hope it helps you too.

Have you try this one https://shadcn-datetime-picker-pro.vercel.app?

[rylder]

I found something here: https://date-picker.luca-felix.com/ The guy did a beautiful job. I hope it helps you too.

Have you try this one https://shadcn-datetime-picker-pro.vercel.app?

I took a look, but I just needed the calendar styles corrected.
I already have my DatePicker component and just wanted to fix the style compatibility issue.
At another time, I will certainly test your component in my applications.

[tylerbecks]

I found something here: https://date-picker.luca-felix.com/ The guy did a beautiful job. I hope it helps you too.

This is also the recommendation in the docs.

[olsio]

I think we might get lucky and get an official fix as collateral. I think they are working on a tailwind 4 migration and will touch all the components.