DatePicker Primitive

[brielov]

Hi there, would you consider adding some kind of date picker primitive in the future? Just browsed this aria practices and seems doable since the modal logic is already implemented.

[jjenzz]

I believe this is something we will introduce to the library eventually.

[abhic91]

has there been any development? @jjenzz

[benoitgrelard]

Nothing on that front yet. We are currently busy finishing off our 1.0.0 milestone: https://github.com/radix-ui/primitives/milestones

[abhic91]

A date/daterange picker would be awesome. Until then https://react-spectrum.adobe.com/react-aria/useDatePicker.html

[adonaicandido]

react-aria is awesome but I don't recommend it if you are usign React 18 and doing SSR. Lot's of problems.

[clementderyckx]

i did not knew that adobe were making web component for developers. It i nice to know. Thank you.
By the way, the radix team, thank you for your nice job. But i agree, a date picker is needed for this library to be the perfect option for any projects.
Let us know while you'll try to implement this.

[yumin-chen]

Newly raised duplicate #1503.

I'd like to see 2 separate components for date pickers:

• Date/Time Picker (to pick a single timestamp)
• Date Range Picker (to pick a range with a start date and an end date)

[tannermann]

@jjenzz @benoitgrelard It would be really great to see a component or multiple components in Radix for date, time, datetime, and date range. Thanks for all of your hard work on Radix so far, it has been really nice to use.

[shing19]

Recommend this one: https://react-tailwindcss-datepicker.vercel.app/

[velrino]

Thank you!

[AdventureBear]

Antoher vote for date / time. / daterange components in radix!

[benoitgrelard]

Closing as duplicate of #1503

[tannermann]

Should the other discussion have been closed instead? This conversation is older with much more conversation/attention, making the other one a duplicate.

[benoitgrelard]

I am planning to organise those a little, I will consider this when I do it.

[0xdevalias]

In case its helpful to anyone looking here:

Shadcn has it

Linking to the relevant parts of shadcn/ui for ease of continuity:

• https://ui.shadcn.com/docs/components/date-picker
• https://ui.shadcn.com/docs/components/calendar

These are both seemingly built on top of React DayPicker (react-day-picker):

• https://github.com/gpbl/react-day-picker

  • DayPicker is a customizable date picker component for React. Add date pickers, calendars, and date inputs to your web applications.

• https://daypicker.dev/

  • React DayPicker
    DayPicker is a React component for creating date pickers, calendars, and date inputs for web applications.

  • Features

    • 🛠 Extensive set of props for customizing the calendar.
    • 🎨 Minimal design that can be easily styled with CSS or any CSS framework.
    • 📅 Supports selections of single days, multiple days, ranges of days, or custom selections.
    • 🌍 Can be localized into any language and time zones.
    • 🌐 Support for ISO 8601, Persian, and broadcast calendar.
    • 🦮 Complies with WCAG 2.1 AA requirements for accessibility.
    • ⚙️ Customizable components to extend the rendered elements.
    • 🔤 Easy integration with input fields.

  • DayPicker is written in TypeScript and compiled to CommonJS and ESM. It relies on date-fns for date manipulation and formatting.

Though if you want to use the latest version of react-day-picker (or date-fns), then you might need to use one of these PRs or similar:

• feat: ✨ new date picker v9 shadcn-ui/ui#4421
• Upgrade react-day-picker to v9 shadcn-ui/ui#4371

Originally posted by @0xdevalias in #1503