Quiero mostrar el valor del selector de tiempo a medida que cambia en el cuadro de diálogo del componente TimePicker . Es eso posible ? Básicamente debería tener el mismo aspecto que el componente StaticTimePicker , excepto cuando se trata de la hora mostrada.
En resumen: lo que quiero es que el componente TimePicker en la segunda imagen muestre la hora seleccionada, al igual que StaticTimePicker en la primera imagen.
1 - Selector de tiempo estático:
2 - Selector de tiempo:
Hay un accesorio para hacer esto, showToolbar={true} . Se puede encontrar en la documentación de la API .
Así es como se debe usar:
<TimePicker showToolbar={true} label="Time" value={value} onChange={handleChange} renderInput={(params) => <TextField {...params} />} />Aquí hay un código Sandbox para más contexto.
Entonces simplemente use StaticTimePicker . No entiendo su problema.
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> ); }