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.

@material-ui/pickers

@material-ui/pickers proporcionan controles de selectores de fecha y hora.

Selectores nativos

⚠️ Los controles de entrada nativos compatibles con los navegadores no son perfectos. Heche un vistazo a @material-ui/pickers para una mejor solución.

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,
    }}
  />
</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,
    }}
  />
</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
    }}
  />
</form>

API

• <TextField />