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.

React components

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.

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,
    }}
    variant="standard"
  />
</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,
    }}
    variant="standard"
  />
</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
    }}
    variant="standard"
  />
</form>

API

<TextField />