[pickers] Toolbar components are not using the set timezone

[ghaerdi]

Steps to reproduce

Link to live example: (required)
https://mui.com/x/react-date-pickers/timezone/

Steps:

1. Go to https://mui.com/x/react-date-pickers/timezone/
2. Inspect page and Toggle device toolbar to simulate a mobile device
3. Scroll the overview sections where are the following two inputs
   
4. Select one of these inputs to open the time picker.
5. Select a time

Current behavior

The displayed time in the time picker it's not the same as selected
In the next screenshot I selected 10 but it's showing 2.

Expected behavior

The displayed time in the time picker should be exactly the same as selected.

Context

The current behavior it's confusing for the end user. I thought the issue was in my project only but I found the same issue in the documentation.

Your environment

No response

Search keywords: TimePicker timezone responsive mobile pad ipad

[michelengelen]

@ghaerdi thanks for opening this issue here.
I can confirm this. It does not happen when using the renderTimeViewClock renderer, so it likely is a bug with the MobileTimePicker component.

@LukasTy didn't we have an issue somewhere related to this already?

[michelengelen]

Just tested it with the MobileTimePicker component. And it is indeed only happening there.

[LukasTy]

LukasTy didn't we have an issue somewhere related to this already?

I vaguely remember seeing something similar, but I couldn't find the issue. 🙈

On the problem itself—it's the Toolbar components that are broken.
TimeClock represents the time correctly, but TimePickerToolbar, DateTimePickerToolbar, as well as DateTimeRangePickerToolbar fail to use the timezone.

The issue is clear and needs to be addressed. Thank you for reporting @ghaerdi 🙏

[ghaerdi]

Didn't expect a quick response, thank you all. Looking forward when this is resolved

[Hawkhub]

Any temporary workaround coming to your mind? I couldn't figure a way to pass timezone prop to MobileTimePicker exclusively from the TimePicker level. But that seems to be a bad solution anyways, cause of the interfering in the TimePicker component logic

[LukasTy]

@Hawkhub I'm not sure if there is any quick workaround here.
The only thing would be to rebuild the Toolbar component with timezone support and pass it to the toolbar slot.

I'll spend some time exploring solutions to see how difficult the fix is. 😉

[flaviendelangle]

@LukasTy I just saw your message, I'm testing a solution 😆

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@ghaerdi: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.