Upgrade `react-day-picker` to v9

[AhmedBaset]

Close #4366

I'm opening this PR as early as possible to avoid the issues we had with <Command /> when cmdk v1.0 was released. And to make it easy for current users to upgrade in their codebases by copying the new update.

This PR upgrades react-day-picker to the latest v9

See Changelog and Upgrade Guide

Notable Changes:

• Renaming some classNames
• date-fns is now a dependency rather than a peer dependency

TODOs:

• [x] Pin react-day-picker to 9.0 to avoid the same issue with the next major

x	o
default
new-york

To upgrade in your codebase:

• pnpm update react-day-picker@9
• pnpm un date-fns If you don't use it anywhere else
• Wait the next shadcn-ui release and run shadcn-ui add calendar --overwrite or copy the source code directly for default or new york styles.

[vercel[bot]]

@AhmedBaset is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

[valentinpolitov]

Thanks, @AhmedBaset, appreciate your work on this. However, I believe there's a bit more to address regarding Tailwind. In react-day-picker v9, the aria-selected attribute has been moved from ~~cell~~ day_button to ~~row~~ day. This component relies heavily on that attribute, so additional adjustments are needed.

[AhmedBaset]

Thanks, @AhmedBaset, appreciate your work on this. However, I believe there's a bit more to address regarding Tailwind. In react-day-picker v9, the aria-selected attribute has been moved from ~cell~ day_button to ~row~ day. This component relies heavily on that attribute, so additional adjustments are needed.

Thanks for the feedback. It's still WIP.

[shadcn]

@AhmedBaset Thanks for your work here. I've pinned react-day=picker to v8 for now. Let me know when this is ready for upgrade.

(Ideally, if you get to it, it would be great to document the upgrade on the calendar page. See https://ui.shadcn.com/docs/components/input-otp#changelog as an example).

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 23, 2024 7:16am

[flixlix]

@shadcn made a similar PR here https://github.com/shadcn-ui/ui/pull/4421 just noticed this one now, but my PR also adds a new feature, feel free to review it :)

[AhmedBaset]

Pinging @shadcn to review

[Christophvh]

v9 adds new functionality which also breaks extra styling: <DayPicker hideNavigation captionLayout="dropdown" />

https://daypicker.dev/docs/navigation#hidenavigation

[Nhollas]

Hello all!

Please take a look at:

Version 9

Version 8

I'm new to open-source, what's normally the way that people contribute?

The code for above lives here.

My approach is aware of the switch RDP made with the aria-selected attributes and seems to be exactly matching the styles of v8. I had hoped to write some UI regression tests with storybook but it wasn't that great at detecting the subtle visual changes.

Currently having some teething issues with the navigation positioning when use opt to use a custom dropdown:

          <Calendar
            mode="single"
            captionLayout="dropdown"
            selected={date}
            onSelect={setDate}
            showOutsideDays={true}
            endMonth={new Date(2099, 11)}
            components={{
              Dropdown: MonthAndYearDropdown,
              Chevron: ({ orientation }) =>
                orientation === "left" ? (
                  <ChevronLeft className="size-4" />
                ) : (
                  <ChevronRight className="size-4" />
                ),
            }}
          />

Code for the above can be found here.

-Nick

[uschen]

here

Hello all!

Please take a look at:

Version 9

Version 8

I'm new to open-source, what's normally the way that people contribute?

The code for above lives here.

My approach is aware of the switch RDP made with the aria-selected attributes and seems to be exactly matching the styles of v8. I had hoped to write some UI regression tests with storybook but it wasn't that great at detecting the subtle visual changes.

Currently having some teething issues with the navigation positioning when use opt to use a custom dropdown:

          <Calendar
            mode="single"
            captionLayout="dropdown"
            selected={date}
            onSelect={setDate}
            showOutsideDays={true}
            endMonth={new Date(2099, 11)}
            components={{
              Dropdown: MonthAndYearDropdown,
              Chevron: ({ orientation }) =>
                orientation === "left" ? (
                  <ChevronLeft className="size-4" />
                ) : (
                  <ChevronRight className="size-4" />
                ),
            }}
          />

Code for the above can be found here.

-Nick

NICE!

-> months: 'flex flex-col sm:flex-row gap-y-4 sm:gap-x-4 sm:gap-y-0', needs relative it seems

[lukasbindreiter]

@shadcn Is there any ETA or planned time when this will be merged? We are waiting quite eagerly for this for a while now already. We mainly want to upgrade due to the UTC dates support in react day picker v9, which we need for our use-case.

[jxnnyo]

any update on this?

[emonorg]

any updates???

[lukasbindreiter]

Woho good news everyone, it seems this has finally been done:

June 2025 Changelog - Calendar Component 🥳

[shadcn]

This is now shipped in latest. @AhmedBaset thanks for all your work on this. We took a different approach and also added Tailwind v4 support but appreciate your work here. Thank you.