search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
3.92k stars 1.2k forks source link

[pickers] Create a headless API for date pickers (Base UI extension) #8313

Open joserodolfofreitas opened 1 year ago

joserodolfofreitas commented 1 year ago

Summary 💡

Users may need to implement an entire custom date picker while still using the basic behavior, accessibility, and experience for picking a date in a calendar.

The proposal is to offer a useCalendar hook to provide a basic and headless implementation for customization.

Examples 🌈

Motivation 🔦

In some situations, when date picking is a central part of your application, you may want to have it completely customized to fit a particular design and experience, especially if this is an external-facing app.

oliviertassinari commented 1 year ago

The most upvoted components in https://github.com/shadcn/ui/issues?q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc are:

  1. https://github.com/shadcn/ui/issues/255
  2. https://github.com/shadcn/ui/issues/81
Screenshot 2023-06-06 at 14 22 57

It would be great to have this Base UI extension.

We have the beginning of such API in https://mui.com/x/react-date-pickers/custom-field/#commonly-used-custom-field from what I understand.

oliviertassinari commented 4 days ago

https://x.com/tannerlinsley/status/1796081138672468302

What's next?

  • TanStack Start - Full-Stack React Framework with client-first DX, server functions, SSR, RSCs and more
  • TanStack Time - Headless utilities for building time-based UI, e.g. Date pickers, date-range pickers, calendars, etc.