[pickers] Replace clock on desktop from TimePicker

[MaxMls]

with material design

for examples:

Ant Design

chrome default time picker

Requests from users

• https://mui.zendesk.com/agent/tickets/7124

[oliviertassinari]

@MaxMls Could you expand on your use case? What's wrong with the Chrome default time picker? What's wrong with the current TimePicker?

[MaxMls]

The default time picker in Chrome works only in the Chrome browser and is very bad for customization, the current TimePickeris bulky and I think it would be nice to have an alternative

[oliviertassinari]

Thanks for the details. I would agree that there is improvement potential. I have been keen to drop the Clock version of the time picker on desktop (keeping it for mobile) since I have first tried to use it. However, the usage of the TimePicker isn't frequent (much less than the DatePicker) hence not much a priority. I think that we will need to get more upvotes on this issue before we prioritize it.

[ghost]

would be nice to have alternatives, time picker isn't that rarely used olivier and indeed clock version isn't best from usability point of view.

[lmb1987]

This x1000. @oliviertassinari I am a lead designer in charge over overseeing 35 product teams. We get CONSTANT feedback on the analog clock as a time selection device in the Time and DateTime pickers. It's an ok method for picking time on a mobile device. It's a terrible method for picking time on a desktop...I don't think I have ever seen anything but negative feedback on the analog clock time selection.

It's surprising how long it has taken to address this.

[oliviertassinari]

@lmb1987 Thanks for the confirmation, I think that we all agree, the clock is not OK on desktop.

Also, I think that https://mui.com/material-ui/react-autocomplete/ can already solve this pain. e.g. cal.com

[mdodell]

Would there be a way to integrate Material-UI's Text Field with a third-party integration, i.e. something like rc-time-picker?

[lmotioc]

Is this in progress? Can I help anyhow?

[jstares]

Any updates on the removal of the analog clock?

[flaviendelangle]

I am migrating this issue to https://github.com/mui/mui-x (see our blog post for context)

We all agree that the clock UI is far for perfect on desktop.
I am currently working on fixing bugs, but this one should be done in the coming months.

If you could link other inspiration you like it would help us build the best time picker possible.

[jstares]

@flaviendelangle Something like this picker would be great
https://www.telerik.com/kendo-react-ui/components/dateinputs/datetimepicker/
Another example of this slide style time picker are the native pickers for chrome shown here:
https://v4.mui.com/components/pickers/

[ovelilla]

What do you think about this time picker?:

https://github.com/ovelilla/timepicker-responsive-vanillajs

[LukasTy]

What do you think about this time picker?:

https://github.com/ovelilla/timepicker-responsive-vanillajs

Thank you for this offer. We did consider this "iOS-like" behavior, but decided to go with a solution resembling the "Ant Design" approach. 😉

[flaviendelangle]

Note that the new architecture will allow you to implement this kind of UI if you prefer it 👍

[buigabor]

Now that a stable version of v6 is out, we should be able to replace the analog clock to our custom component, is that right?

[flaviendelangle]

Yes, we did not document it yet because we want to do a good documentation and not some small example.

You can look at this section of the migration guide and the renderDate / renderTime method in our codebase.

I'm interested in feedback, problem you encounter trying to build a custom view.
The new architecture is very flexible but maybe we miss some features to make it easy to use.

[JStevens127]

@LukasTy Amazing news re: #7958 ❤️ !! Quick question that I'm struggling to find an answer for -- how can we switch the Timepicker to use the DigitalClock (instead of the MultiSectionDigitalClock) as you have in your screen recording:

[LukasTy]

Thank you @JStevens127
We've introduced three new props (thresholdToRenderTimeInASingleColumn, timeSteps, and skipDisabled) for controlling this behavior, depending on how granular you want your options to be: https://mui.com/x/api/date-pickers/time-picker/#props
If I'm not mistaken, the demo used timeSteps.minutes={30} and thresholdToRenderTimeInASingleColumn={100}.
You can use one, the other, or all props to achieve your desired time granularity and look. Just note that if you only increase the threshold, the options list will be somewhat huge and might not produce the best UX.

If you have a limited amount of options you want to render, consider also using the skipDisabled prop in combination with minTime, shouldDisableTime, or any other validation prop to achieve the desired options list.

P.S. You just reminded me to either rename this issue or declare in some other way, that for now it's only the TimePicker that by default got this view because the DateTimePicker is going to get a bit of a redesign and will be introduced via a separate PR. 🙈

[JStevens127]

Fantastic, the combination of skipDisabled and thresholdToRenderTimeInASingleColumn did the trick for me!!

I've been a MUI/MUI-X user for over 3 years. Love the product, but the TimePicker was always a major sore spot for me. Your work on #7958 is an absolute game changer!

In case it helps, linking another related issue here (perhaps one that can be closed) #5079

Thank you again!

[flaviendelangle]

The doc is here

But on the new UI is available on the last version, you can have a look here

[TonyBrobston]

@flaviendelangle I ended up finding that doc right after I posted. Though I must be doing something wrong, I can't seem to get it to work. I added it (copy/paste) to our theme/ThemeProvider and I also tried adding it at the component level since viewRenderer is listed in DesktopDateTimePicker, but no dice.

<DesktopDateTimePicker
  open={isOpen}
  onOpen={() => setIsOpen(true)}
  onClose={() => setIsOpen(false)}
  slots={{
    field: ({ InputProps: { ref } }) => (
      <CalendarMonthIcon ref={ref} onClick={() => setIsOpen(true)} />
    ),
  }}
  viewRenderers={{
    hours: renderTimeViewClock,
    minutes: renderTimeViewClock,
    seconds: renderTimeViewClock,
  }}
/>

Will the digital time picker also be released for DateTimePicker and DesktopDateTimePicker?

[LukasTy]

Will the digital time picker also be released for DateTimePicker and DesktopDateTimePicker?

Yes, it's already in progress: #8819.
Initially, it will only be available on the Desktop version.

Though I must be doing something wrong, I can't seem to get it to work. I added it (copy/paste) to our theme/ThemeProvider and I also tried adding it at the component level since viewRenderer is listed in DesktopDateTimePicker, but no dice.

Here is a working example with the TimeClock as the time view on the DesktopDateTimePicker. 😉

[TonyBrobston]

@LukasTy Thank you for that example. I now realize I had it implemented correctly and just got confused, I was expecting to see this tab structure; but in any case, this will work! Thank you!

[TonyBrobston]

@LukasTy Actually, is there a way to get those tabs?

[LukasTy]

Actually, is there a way to get those tabs?

Tabs are hidden by default on desktop mode. You can force them to be available on desktop using slotProps={{ tabs: { hidden: false } }}. 😉

[St1ko]

@LukasTy Will the DateTimePicker at some point have a digital time picker?

[LukasTy]

Yes, it should be released this Thursday, if all goes according to plan. 👌
#8946