Pular para o conteúdo
Ajude a traduzir esta página

Seletor de hora

Seletores de horário permitem que o usuário selecione um horário.

Seletores de hora permitem que o usuário selecione um horário simples (no formato de horas:minutos). O horário selecionado é indicado pelo círculo preenchido no final do ponteiro do relógio.

Requisitos

Este componente depende da biblioteca de gerenciamento de datas da sua escolha. Ele suporta date-fns, luxon, dayjs, moment e qualquer outra biblioteca através da interface publica dateAdapter.

Por favor, instale qualquer uma destas bibliotecas e configure corretamente o mecanismo de data encapsulando na raiz dos componentes (ou o nível mais alto que você deseja que os seletores estejam disponíveis) com LocalizationProvider:

// ou @material-ui/lab/Adapter{DayJS,Luxon,Moment} ou qualquer adaptador válido de date-io
import AdapterDateFns from '@material-ui/lab/AdapterDateFns';
import LocalizationProvider from '@material-ui/lab/LocalizationProvider';

function App() {
  return (
    <LocalizationProvider dateAdapter={AdapterDateFns}>...</LocalizationProvider>
  );
}

Utilização Básica

O seletor de hora ajustará automaticamente à configuração de horário da localidade, ou seja, ao formato 12 horas ou 24 horas. Isso pode ser controlado com a propriedade ampm.

<LocalizationProvider dateAdapter={AdapterDateFns}>
  <TimePicker
    label="Basic example"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(params) => <TextField {...params} />}
  />
</LocalizationProvider>

Localização

Use LocalizationProvider para alterar a date-engine de localização que é usada para renderizar o seletor de hora. Observe que a configuração am/pm é trocada automaticamente:

Responsividade

O componente seletor de hora é projetado e otimizado para o dispositivo em que ele é executado.

  • A versão "móvel" funciona melhor para dispositivos de toque e telas pequenas.
  • A versão "desktop" funciona melhor para dispositivos com mouse e telas grandes.

Por padrão, o componente TimePicker usa uma consulta de mídia @media (pointer: fine) para determinar qual versão usar. Isto pode ser customizado com a propriedade desktopModeMediaQuery.

hh:mm (a|p)m

Validação de hora

Modo estático

É possível renderizar qualquer seletor em linha. Isto permitirá construir contêineres customizados de popover/modal.

SELECT TIME
:
123456789101112
<LocalizationProvider dateAdapter={AdapterDateFns}>
  <StaticTimePicker
    displayStaticWrapperAs="mobile"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(params) => <TextField {...params} />}
  />
</LocalizationProvider>

Paisagem

SELECT TIME
:
051015202530354045505500
<LocalizationProvider dateAdapter={AdapterDateFns}>
  <StaticTimePicker
    ampm
    orientation="landscape"
    openTo="minutes"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(params) => <TextField {...params} />}
  />
</LocalizationProvider>

Segundos

O campo de segundos pode ser usado para seleção de um ponto de tempo exato.

API