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/
4.52k stars 1.31k forks source link

[pickers][TimePicker] Is there currently a way to pass an array of available times and order them? #15176

Open ManuC84 opened 1 week ago

ManuC84 commented 1 week ago

Summary

I need to pass an array of available times to the time picker so I'm currently doing it like on this code sandbox

https://codesandbox.io/p/sandbox/timepicker-forked-pzvhn8

And it works fine, except the order is not as desired because the early hours of the next morning appear before the hours of the afternoon. I'm wondering if there's a better way to do this currently with the available API.

Examples

No response

Motivation

No response

Search keywords: timepicker order array

michelengelen commented 1 week ago

Hey @ManuC84 the time picker will always show the times for the current date. I am afraid that what you are trying to achieve is currently not possible with the TimePicker component since your desired approach spans multiple dates. I guess what you want could be achievable with the DateTimePicker and a combination of shouldDisableDate and shouldDisableTime instead.

ManuC84 commented 1 week ago

Hey @michelengelen , appreciate your response.

The current approach is working quite well though, do you see any hack to get the hours to display in the desired order (15, 16, 17.....etc....and then below 0, 1, 2 ....etc)?

michelengelen commented 1 week ago

I am pretty sure that this is not possible at the moment. Or is there anything I might have missed @LukasTy ?

ManuC84 commented 1 week ago

I'll await if @LukasTy has any feedback otherwise we can close this and I appreciate your help @michelengelen 🙏

LukasTy commented 2 days ago

Sorry for the delayed answer @ManuC84. @michelengelen thank you for a detailed response. As you mentioned, the current API has no clear way to achieve the desired result. The TimePicker is always working with the notion of a day and renders time options in a given day.

We can consider the request to support a different API for "validation"—by providing the available dates(times). This question/consideration is still up for debate when reworking the Date Range Picker validation (https://github.com/mui/mui-x/pull/13816). I'm adding this issue to the grooming board to discuss with the team. 😉

P.S. There is a cleaner way to hide disable time options. 😉