Date/Time pickers日期/时间选择器

日期选择器和时间选择器提供了一个从事先设定好的日期集合中选择单个值的简单方法。

在移动端，选择器最适合在确认对话框中展示。
若是内联显示，如在一个表单内展示，请考虑使用分段下拉按钮这样的紧凑型控件。

React 组件

Date picker desktop

mm/dd/yyyy

Date picker mobile

Time picker

原生的选择器

⚠️ 浏览器支持的原生输入控件并不是完美的。

Date picker

示例展示了当 type="date" 时的原生的日期选择器。

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

Date & Time picker

这个例子通过 type="datetime-local" 实现了原生的日期和时间选择器。

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

Time picker

这个例子通过 type="time" 实现了原生的时间选择器。

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

API

<TextField />