Skip to content
Advertisement

Is it possible for material-ui’s timepicker component to display to picked time within the opened dialog

I want to display the timepicker value as it changes on the TimePicker component dialog. Is that possible ? It should basically look the same as the StaticTimePicker component, except when it comes to the displayed time.

In Summary : What I want is for the TimePicker component in the second picture to display the selected time, just like the StaticTimePicker in the first picture.

1 – StaticTimePicker:

enter image description here

2 – TimePicker:

enter image description here

Advertisement

Answer

There is a prop to do this, showToolbar={true}. It can be found in the API documentation.

This is How it should be used :

<TimePicker
  showToolbar={true}
  label="Time"
  value={value}
  onChange={handleChange}
  renderInput={(params) => <TextField {...params} />}
/>

Here is a code Sandbox for more context.

User contributions licensed under: CC BY-SA
1 People found this is helpful
Advertisement