Pular para o conteúdo

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.

Utilização Básica

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

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <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
:
123456789101112
<LocalizationProvider dateAdapter={AdapterDayjs}>
  <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.

Propriedades de formulário

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

Localização

Use LocalizationProvider para alterar a date-library 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.

⚠️ Missing demo `LocalizedTimePicker.js` ⚠️

Validação de hora

Paisagem

Select time
:
051015202530354045505500
<LocalizationProvider dateAdapter={AdapterDayjs}>
  <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.).

001234567891011121314151617181920212223
<LocalizationProvider dateAdapter={AdapterDayjs}>
  <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.