Calendar And Date Fields primitives

[peter-emad99]

Feature request

Provide Headless Primitives for Calander and Date Fields

Examples in other libraries

https://ark-ui.com/react/docs/components/date-picker https://react-spectrum.adobe.com/react-aria/Calendar.html

Motivation

it will be great to have this built in

[lanzclintonv]

Would be cool to have one with features from MUI X but unstyled.

[colmtuite]

@lanzclintonv Which features in particular do you want?

[lanzclintonv]

@lanzclintonv Which features in particular do you want?

All the standard features such as limiting the dates (start and end date), and the ability to disable some dates (or a date range).

Most importantly, month and year views when navigating through other dates. This makes the date picker be a month picker and a year picker too.

In addition, rendering multiple months too.

I believe all of these can be done as a headless component. In fact, Zag has already made one.

[flaviendelangle]

I started working on a Calendar component for the Base UI team in #1973

I'll use this issue to list things that needs to be done around this line of components:

Planned work

• [ ] Create a Calendar component with only day editing (#1973)
• [ ] Create a Range Calendar component with only day editing
• [ ] Create one or several field components to support date, time, date time, date range, time range and date time range edition
• [ ] Create the documentation for UTC and timezone usage (equivalent of this MUI X page)
• [ ] Create the documentation for date format and localization (equivalent of this MUI X page)
• [ ] Create the documentation for the Calendar systems if we want to keep supporting them (equivalent of this MUI X page)

To be decided

• [ ] Create a Date Picker component (we need to determine what the added value of this component compared to only using Date Field and Calendar inside a Popover)
• [ ] Create a Date Range Picker (same concerns as for the Date Picker)
• [ ] Add month and year editing to the Calendar component

[peter-emad99]

When you say day editing ..it includes year and months also ? Should we have support for selecting time also in calendar component ?

[flaviendelangle]

When you say day editing ..it includes year and months also ?

No, I'll add those in the "to be decided", we are currently debating the added value of dedicated primitives for month and year editing compared to directly using a Select or a ListBox (when available)

[flaviendelangle]

Should we have support for selecting time also in calendar component ?

It wouldn't be in the Calendar component. We could consider having a component for time editing, but we want to cover the Calendar and the Field before 👍

[nickhall]

It would be great as this is implemented if we could have built-in support for Temporal, or at least an adapter.

[LukasTy]

Temporal is still in experimental stage with only Firefox supporting it. AFAIK, Luxon plans to use Temporal under the hood, when it is widely supported. I wouldn't be surprised if date-fns would do something similar. Hence, the landscape is slightly unclear about what would actually be needed from such solutions until it is more widely adopted.