[New Primitive] DatePicker

[ranjithpmankada]

Feature request

Overview

Examples in other libraries

Who does this impact? Who is this for?

Additional context

[benoitgrelard]

@ranjithpmankada I'm guessing you meant "Date" picker right? I've updated the title, but let me know if you meant something else.

[nathanielrindlaub]

If we are in fact talking about a date picker - I too would love to see a primitive for it!

[yumin-chen]

Seems to be a duplicate of #969 but I too would love to see a date picker and a date range picker primitive too.

[abhic91]

Seems to be a duplicate of #969 but I too would love to see a date picker and a date range picker primitive too.

until then https://react-spectrum.adobe.com/react-aria/useDatePicker.html

[rawnly]

I recently built my own DateRangePicker combining radix and @h6s/calendar it actually works pretty well and seems to have good accessibility too (is still wip).

I can share a gist if this can help someone ✌️

[nathanielrindlaub]

@rawnly I'd love to take a look at a Gist!

[rawnly]

@nathanielrindlaub here it is! https://gist.github.com/Rawnly/4ee653d5556ce354c491d20eb1c63027
As i said, is still a POC so no optimisation and code quality might not be the best.

[emigdio821]

I recently built my own DateRangePicker combining radix and @h6s/calendar it actually works pretty well and seems to have good accessibility too (is still wip).

I can share a gist if this can help someone ✌️

This is looking nice! @rawnly , do you have an example (CodeSandbox) to see it in action? thanks.

[rawnly]

Hey, @emigdio821 unfortunately I'm not able to post any source code for this since it is for my company.
Anyway, using a headless calendar + radix popover does the trick. You may want to use a state machine to handle steps and avoid impossible states :)

[a-type]

I know this is probably not an active pursuit of the team at the moment, but I have a library called calendar blocks which is pretty in-line with the Radix unstyled & composable methodology. I'd be happy to have it 'adopted,' even just absorbed, into Radix if the team is interested.

It mostly does keyboard interaction while staying out of the way in terms of structure and visual design. For example, you could render a single calendar grid, a dual-month view, or even a vertical infinite list of dates, all of which utilize the same underlying state values.

[tannermann]

Support for new date/time/datetime primitives

[Brenndoerfer]

Would love to see this, too

[udaya28]

Waiting for date and time picker primitive
can someone suggest any headless date and time picker for react?

[rawnly]

@udaya28 i used @h6s/calendar

[snovos]

Any update? Its been almost a year since initial feature request was opened. Seems like datepicker is in high demand within community

[DarioLopes]

Shadcn has it, patiently waiting for this to come to our beloved Radix 😄

[sersavan]

Hi, try this one assembled with shadcn

https://shadcn-calendar-component.vercel.app

[andagent]

Is there any update on this feature? I think that there are not a lot of interfaces that don't require date picking, so this is pretty essential.

[gabrielperman]

Bump, would be fantastic to have this directly in radix 🤝

[musjj]

Would love to see this too. React Aria is nice, but it has a lot of eccentricities and its special ways of doing things which creates friction when integrating it into a project that is not all-in on React Aria.

For example, it returns its own special date type (@internationalized/date) instead of just a plain Date. And there's also the onPress, etc. stuff.

There's react-day-picker, but it doesn't support type-able date inputs. It's also tied to the date-fns library, which is not ideal if you're using a different date library.

The ecosystem really needs better solutions for special inputs like this (date, number, etc.).

[JeremyMColegrove]

Would love to see this as well

[cgatian]

Sad to see the closed, but it's the right thing to do if the team is not planning it. However, it would be courteous of the devs to provide reasoning to the community.

This might just be a bulk edit, and a comment follow up comment is coming 🙏

[chaance]

It's not planned at the moment, and that's why it's closed :)

For the moment we have limited bandwidth. There are a few new components we're planning and will discuss when we're ready. Folks are free to weigh in on what they'd like to see in discussions, but issues are for issues and I'm trying to clean up our backlog to make it easier for triaging.

[0xdevalias]

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