React Date Picker（日期选择器）和 Time Picker（时间选择器）组件

@material-ui/pickers

@material-ui/pickers 为您提供了日期和时间选择器的控件。

Date picker inline

Date picker dialog

Time picker

原生的选择器

⚠️ 浏览器支持的原生输入控件并不是完美的。您可以看一下 @material-ui/pickers 提供的更完善的方案。

Datepickers 日期选择器

示例展示了当 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>

Date & Time pickers 日期和时间选择器

这个例子通过 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>

Time pickers 时间选择器

这个例子通过 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