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

Question

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

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

Answer 1

有一个属性 maxDate of DatePicker，你可以设置为今天的日期，它不允许select 未来的日期。

maxDate = {new Date()}

像这样使用它：

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

注意：您也可以在minDate.

中指定最小日期

检查DOC。

Answer 2

使用当前的 material-ui 并且如果您使用的是 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 日期选择器中禁用未来日期

how to disable future dates in material-ui datepicker in reactjs

javascript

reactjs

material-ui