0
177
ViewsIs 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:
2 - TimePicker:
·
Juan Pablo Isaza
2 answers
Answer question0
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.
·
Juan Pablo Isaza
Report
0
Then just use the StaticTimePicker I don't understand your problem.
export default function MaterialUIPickers() {
const [value, setValue] = React.useState<Date | null>(
new Date(),
);
const handleChange = (newValue: Date | null) => {
setValue(newValue);
};
return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<StaticTimePicker
displayStaticWrapperAs="mobile"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
);
}
·
Juan Pablo Isaza
Report
Answer question