mui-x
mui-x copied to clipboard
mui
[pickers] Replace clock on desktop from `TimePicker` and `DateTimePicker`
with material design
for examples:
Ant Design
chrome default time picker
Requests from users
- https://mui.zendesk.com/agent/tickets/7124
@MaxMls Could you expand on your use case? What's wrong with the Chrome default time picker? What's wrong with the current TimePicker?
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
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.
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.
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.
@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
:D I wonder why many comments marked as spam? Upvoting for this. To be honest, the current UI looks not so good.
I wonder why many comments marked as spam?
Comments that add nothing to the discussion are marked as off-topic to help make it easier to follow the active discussion. "Me too", "Upvoted", "Any update?" etc. aren't helpful. Use reactions for that.
Would there be a way to integrate Material-UI's Text Field with a third-party integration, i.e. something like rc-time-picker?
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.
@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/
Hi @flaviendelangle, I appreciate you and your team working on time picker and I know that you need to stay with material design. But personally, I hate material time picker UI, it just weird... If any UI prefer: https://element.eleme.io/#/en-US/component/time-picker
For the clock I think the whole team agree of dropping it even if it's the Material Design way.
Hi @flaviendelangle, I appreciate you and your team working on time picker and I know that you need to stay with material design. But personally, I hate material time picker UI, it just weird... If any UI prefer: https://element.eleme.io/#/en-US/component/time-picker
This looks perfect! Syncfusions TimePicker and DateTimePicker uses a similar approach: https://ej2.syncfusion.com/react/demos/#/material/datetimepicker/default
@flaviendelangle Any update on the timeline for when a new material UI Date-Time picker will be released?
Not yet We are currently discussing the root behaviors of these new pickers The goal being to provide a great experience, even if it take some time to define how those components should work :+1:
Small update We are developing new components for keyboard editing.
Once those are ready, we will improve the pickers to allow skipping the views for some date parts and use directly the input.
@flaviendelangle will you be adding the keyboard features to the DateTime control as well? We have currently hacked together a solution to make it work but it isn't pretty
If you go to the link in my previous comment, you have one example with a date time format.
We are currently discussing the API details (there will probably DateTimeField and TimeField components rather than a single component).
What is not clear for now is how will it works on DateTimePicker when you open the picker and pick a date.
My assumption is that it should close the picker and select the 1st time section on the field (the hour most of the time).
Apologies @flaviendelangle, I did mean the DateTimePicker.
I think that is a fair assumption regarding the picker, it would be how I expect it to respond.
Is there a timeline on this getting resolved? The past couple clients I've had prefer the native time picker experience, but it obviously has a lot of limitations so an alternate TimePicker variant would be amazing. Is there anything I can do to help?
The Clock has been removed from desktop pickers on the v6 alpha Unfortunately it was to big of a breaking change to correctly do it without a breaking change
The stable release should come in Q1 2023
The Clock has been removed from desktop pickers on the v6 alpha Unfortunately it was to big of a breaking change to correctly do it without a breaking change
The stable release should come in Q1 2023
@flaviendelangle Does this mean the team plans to replace the time picker with a digital picker a la Chrome native time picker, or will there just be no picker now?
