Search code examples
javascriptreactjstimepickermaterial-table

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


Solution

  • 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.