[pickers] Calendar and Date Fields primitives

[peter-emad99]

Summary

Provide Headless Primitives for:

• Calendar components
• Date Field components [pickers] Add Date Input / Field #3332

Examples in other libraries

• https://ark-ui.com/react/docs/components/date-picker
• https://react-aria.adobe.com/DateField
• Private link: https://www.notion.so/mui-org/pickers-Date-Picker-component-ff8f898636184effbeecd011d85d6ed7

Motivation

It will be great to have this built in that is more useful in the real world

User requests:

• https://x.com/IbnuMusyaffa/status/2041470558257447152
• https://x.com/Honason/status/2041464975194026347
• https://x.com/arshadyaseeen/status/2041463307916189780
• https://x.com/rafal_ziolek/status/2041801349017264319

[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 ([temporal] New Calendar component #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 👍