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.

@material-ui/pickers

A biblioteca @material-ui/pickers fornece os controles de seletores de data e hora.

Seletores nativos

⚠️ O suporte dos navegadores aos controles de entrada nativos não é perfeito. Dê uma olhada em @material-ui/pickers para obter uma melhor solução.

Seletores de data

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

<form className={classes.container} noValidate>
  <TextField
    id="date"
    label="Birthday"
    type="date"
    defaultValue="2017-05-24"
    className={classes.textField}
    InputLabelProps={{
      shrink: true,
    }}
  />
</form>

Seletores de Data & Hora

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

<form className={classes.container} noValidate>
  <TextField
    id="datetime-local"
    label="Next appointment"
    type="datetime-local"
    defaultValue="2017-05-24T10:30"
    className={classes.textField}
    InputLabelProps={{
      shrink: true,
    }}
  />
</form>

Seletores de hora

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

<form className={classes.container} noValidate>
  <TextField
    id="time"
    label="Alarm clock"
    type="time"
    defaultValue="07:30"
    className={classes.textField}
    InputLabelProps={{
      shrink: true,
    }}
    inputProps={{
      step: 300, // 5 min
    }}
  />
</form>

API

• <TextField />