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

The date picker is rendered as a modal dialog on mobile, and a textbox with a popup on desktop.

Basic example

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

Modo estático

It's possible to render any time picker inline. Isto permitirá construir contêineres customizados de popover/modal.

Select time

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

Responsividade

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

The MobileTimePicker component works best for touch devices and small screens.
The DesktopTimePicker component works best for mouse devices and large screens.

By default, the TimePicker component renders the desktop version if the media query @media (pointer: fine) matches. Isto pode ser customizado com a propriedade desktopModeMediaQuery.

For mobile

For desktop

Propriedades de formulário

The time picker component can be disabled or read-only.

disabled

read-only

Localização

Use LocalizationProvider para alterar a date-engine de localização que é usada para renderizar o seletor de hora. 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.

Validação de hora

min/max time

Disable odd hours

Paisagem

Select time

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

Subcomponentes

Some lower-level sub-components (ClockPicker) are also exported. Estes são renderizados sem estar encapsulado ou lógica exterior (campo com mascara, valores de data e validação, etc.).

<LocalizationProvider dateAdapter={AdapterDateFns}>
  <ClockPicker date={date} onChange={(newDate) => setDate(newDate)} />
</LocalizationProvider>

Segundos

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

With seconds

Minutes and seconds