Seletores Data / Hora

Seletores de data e seletores de hora fornecem uma maneira simples de selecionar um único valor de um conjunto pré-determinado.

Em dispositivos móveis, seletores são melhores aplicados quando mostrados em diálogos de confirmação.
Para exibição em linha, como em um formulário, considere usar controles compactos, como botões suspensos segmentados.

Componentes React

Date picker desktop

mm/dd/yyyy

Date picker mobile

Time picker

Seletores nativos

⚠️ O suporte dos navegadores aos controles de entrada nativos não é perfeito.

Date picker

Um exemplo de seletor de data nativo com type="date".

<form noValidate>
  <TextField
    id="date"
    label="Birthday"
    type="date"
    defaultValue="2017-05-24"
    sx={{ width: 220 }}
    InputLabelProps={{
      shrink: true,
    }}
  />
</form>

Date & Time picker

Um exemplo de seletor de data & hora nativo com type="datetime-local".

<form noValidate>
  <TextField
    id="datetime-local"
    label="Next appointment"
    type="datetime-local"
    defaultValue="2017-05-24T10:30"
    sx={{ width: 250 }}
    InputLabelProps={{
      shrink: true,
    }}
  />
</form>

Time picker

Um exemplo de seletor de hora nativo com type="time".

<form noValidate>
  <TextField
    id="time"
    label="Alarm clock"
    type="time"
    defaultValue="07:30"
    InputLabelProps={{
      shrink: true,
    }}
    inputProps={{
      step: 300, // 5 min
    }}
    sx={{ width: 150 }}
  />
</form>

API

<TextField />