Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

179
Visualizações
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

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

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.

about 4 years ago · Juan Pablo Isaza Relatório

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>
  );
}

https://stackblitz.com/edit/react-fgwzeg?file=demo.tsx

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda