Date / Time pickers

Date pickers and Time pickers provide a simple way to select a single value from a pre-determined set.

En móvil, los selectores son los mas 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

descargas npm

@material-ui/pickers provides date picker and time picker controls.

Date picker inline

Date picker dialog

Time picker

Native pickers

⚠️ Los controles de entrada nativos compatibles con los navegadores no son perfectos. Have a look at @material-ui/pickers for a richer solution.

Datepickers

A native datepicker example with 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 />