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

[ManuC84]

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]

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]

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]

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

[ManuC84]

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

[LukasTy]

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. 😉

[ManuC84]

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 (#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. 😉

Thanks a lot for the information @LukasTy. I will take this into account and hopefully this will be taken into account for future improvements.

Best regards.