Question

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

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

Answer 1

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

maxDate = {new Date()}

使用它像这样：

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

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

检查DOC。

Answer 2

在当前的材质用户界面中，并且如果您使用的是 KeyboardDatePicker ，那么以下操作将有效

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

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

Answer 3

您可以在 Material 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">

如何在reactjs中的material-ui datepicker中禁用将来的日期

3 个答案: