Selectores de Fecha / Hora

Los selectores de fecha y hora proporcionan una forma simple de seleccionar un solo valor de un conjunto predeterminado.

En móvil, los selectores son los más adecuados para despliegue en diálogos de confirmación.
Para despliegue en línea, como en un formulario, considere usar controles compactos tales como los botones desplegables segmentados.

React components

Date picker desktop

mm/dd/yyyy

Date picker mobile

Time picker

Selectores nativos

⚠️ Los controles de entrada nativos compatibles con los navegadores no son perfectos.

Selectores de fecha

Un ejemplo del selector de fecha nativo con 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>

Selectores de fecha y hora

Un ejemplo de selector de fecha y hora con 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>

Selectores de hora

Un ejemplo de un selector de hora nativo con 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 />