[TimePicker] Allow to provide my own views

[vickonrails]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

First off, great job on the Library🙏.

Now to the point... The new TimePicker from mui-x doesn't meet my current visual needs and I'm looking to heavily customize it. Just wanted to find out if the community could point me in the right direction to do this.

Basically wanted to achieve something like this with a few criteria

• 12 hour-time & 24 hour-time based on the personal settings
• can enter the time manually
• can select or scroll to select the time number

Something similar to this variant in the material design spec

Unfortunately, the closest implementation I can find in mui is this one

This misses a lot from the spec like

• editing the time like a normal input field
• scrolling/keyboard arrow keys to increment/decrement, etc

My questions are

• Is it possible to customize it to the desired state in image 1?
• If it is, what's the best way to go about this in your opinion?
• If not, do you know of any time picker libraries that can fit this use case?

Thanks a lot in advance. Great job with the library!

Examples 🌈

No response

Motivation 🔦

No response

[m4theushw]

I don't think it's possible because there's no way to replace the content rendered inside the popover. The one in the screenshot is completely different from the clock view we have. There're should be a way to replace CalendarOrClockPicker inside DesktopTimePicker to be able to achieve this layout.

About splitting the time input into two inputs, it's similar to #5021

Pinging @flaviendelangle and @alexfauquette since they work in this component.

[flaviendelangle]

The UI you are proposing could be one of the variant we intend to implement in #4483

But we should also improve the ability to replace big parts of the UI for users wanting deep customization.
We are currently introducing a slot system (like for the Data Grid) which is basically the foundations for this kind of override.
For now, we start with small overrides, because once a component is overridable, its props becomes public API. And for now, a lot of the internal components don't have an API stable enough to do it.
So it's a big piece of work that we are achieve bit by bit 👍

[Misiu]

I have a similar requirement.
I need to show time as a dropdown list (clients will be able to pick hours from a predefined list).

Ideally, I'd like to show two icons inside the input, one for date selection (with the current date picker), and the second for time (with list).

Searching over the net I found a similar component:
https://ej2.syncfusion.com/react/demos/#/material/datetimepicker/default
A similar thing can be done with and design TImePicker: https://codesandbox.io/s/hour-and-minute-antd-4-22-3-forked-s3y8ei?file=/demo.js
But ideally, we should be able to specify a different style of picking time (hours in my case)

[LukasTy]

@vickonrails @Misiu
We have added (#7176) the option to provide a custom view renderer to any of the picker views in v6.
Could you double check if that would solve your use cases or is it still missing something?

[Misiu]

@LukasTy I missed that one, thx for the link.
After a quick look at the provided demo we are able to override a view:

const timeViewRenderers = {
  hours: renderTimeViewClock,
  minutes: renderTimeViewClock,
  //seconds: renderTimeViewClock
};

but not sure if this will allow us to build a single view that will allow us to pick hours and minutes (like on screenshots in initial message). Idea is to unify hours and minutes view into a single view (with two inputs).

[LukasTy]

but not sure if this will allow us to build a single view that will allow us to pick hours and minutes (like on screenshots in initial message). Idea is to unify hours and minutes view into a single view (with two inputs).

As you can see in the example linked within the issue as well as the fact, that all views have the same renderer—component. It should be possible, unless there would be some missing state/prop propagation, that would be needed to handle specific scenario.

[JStevens127]

Is there a working example of a timepicker with a scrollable popover that lists hours and minutes? This is effectively the universal UI/UX for timepickers, including Google products (like GCal):

[LukasTy]

@JStevens127 We are currently working on providing the mentioned solution as the new default on desktop time pickers. 😉
You can check the new DigitalClock component here and the new default time picker view here.

[JStevens127]

@LukasTy thats great news, thanks!

[LukasTy]

Closing this issue as the ability to provide your own view renderer has already been introduced in v6.
For now, it's mentioned in the migration guide. We will improve upon it in the future with a dedicated page/section explaining it with more examples, but that is a separate issue on its own. 😃