Pular para o conteúdo

Seletor de data e hora

Seletor de data & hora combinados.

Este componente combina os seletores de data & hora. Ele permite que o usuário selecione data e hora com o mesmo controle.

Note que este componente é cobinação dos componentes DatePicker eTimePicker, então qualquer uma das propriedades desses componentes pode ser passada para o DateTimePicker.

Utilização Básica

Permite escolher a data e hora. Existem 4 etapas disponíveis (ano, data, hora e minuto), então as abas são necessárias para distinguir visualmente os passos de data/hora.

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <DateTimePicker
    renderInput={(props) => <TextField {...props} />}
    label="DateTimePicker"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
  />
</LocalizationProvider>

Responsividade

O componente DateTimePicker é projetado e otimizado para o dispositivo em que ele é executado.

  • The MobileDateTimePicker component works best for touch devices and small screens.
  • The DesktopDateTimePicker component works best for mouse devices and large screens.

By default, the DateTimePicker 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 date time picker component can be disabled or read-only.

Validação de data e hora

É possível restringir a seleção de data e hora de duas maneiras:

  • por meio de minDateTime/maxDateTime é possível restringir a seleção de tempo para antes ou após um determinado momento no tempo
  • usando minTime/maxTime, você pode desabilitar selecionar horas antes ou depois de um certo tempo a cada dia, respectivamente

Modo estático

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

<LocalizationProvider dateAdapter={AdapterDayjs}>
  <StaticDateTimePicker
    displayStaticWrapperAs="desktop"
    openTo="year"
    value={value}
    onChange={(newValue) => {
      setValue(newValue);
    }}
    renderInput={(params) => <TextField {...params} />}
  />
</LocalizationProvider>

Customização

Aqui estão alguns exemplos de seletores de data & hora fortemente customizados:

Hardcoded helper text

Clear Initial State