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.

Date picker

Un ejemplo del selector de fecha nativo con type="date".

<form noValidate>
  <TextField
    id="date"
    label="Birthday"
    type="date"
    defaultValue="2017-05-24"
    style={{ width: 220 }}
    InputLabelProps={{
      shrink: true,
    }}
  />
</form>

Date & Time picker

Un ejemplo de selector de fecha y hora con type="datetime-local".

<form noValidate>
  <TextField
    id="datetime-local"
    label="Next appointment"
    type="datetime-local"
    defaultValue="2017-05-24T10:30"
    style={{ width: 250 }}
    InputLabelProps={{
      shrink: true,
    }}
  />
</form>

Time picker

Un ejemplo de un selector de hora nativo con type="time".

<form noValidate>
  <TextField
    id="time"
    label="Alarm clock"
    type="time"
    defaultValue="07:30"
    InputLabelProps={{
      shrink: true,
    }}
    inputProps={{
      step: 300, // 5 min
    }}
    style={{ width: 150 }}
  />
</form>

API

<TextField />