如何在 reactjs 中的 material-ui 日期选择器中禁用未来日期

Question

如何在 reactjs 中禁用 material-ui 日期选择器中的未来日期？

我想禁用 ReactJS 中 material-ui 中今天之后的未来日期。 如何禁用未来日期？

Answer 1

DatePicker有一个属性maxDate ，您可以将其设置为今天的日期，它不允许选择未来的日期。

maxDate = {new Date()}

像这样使用它：

<DatePicker
    onChange= {...}
    mode="landscape"
    value={...}
    floatingLabelText="Date"
    minDate={...}
    maxDate={new Date()}  //maxDate
/>

注意：您也可以在minDate指定最小日期。

检查文档。

Answer 2

使用当前的 material-ui，如果您使用的是KeyboardDatePicker ，则以下操作将起作用

import { KeyboardDatePicker } from '@material-ui/pickers';

<KeyboardDatePicker
  // other props
  disableFuture={true}
/>

Answer 3

您可以在材质 UI 中使用<TextField>组件，只需给它一个type=date 。 如果你想使用 min 或 max 属性，你必须通过 inputProps <TextField type="date" inputProps={{ min: "2020-10-10" }} />

只需确保格式与输入的类型相对应。 <input type="date" value="2017-06-01"> <input type="datetime-local" min="2018-06-07T00:00">

Answer 4

您可以将 disableFuture 属性与DatePicker和KeyboardDatePicker一起使用

<DatePicker
    onChange= {...}
     value={...}
     minDate={...}
  disableFuture={true}
/>