如何禁用ReactJ中材料-UI datepicker中的未来日期

Question

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

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

Answer 1

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

maxDate = {new Date()}

这样使用：

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

NOTE ：您也可以在minDate中指定最小日期。

检查文档

Answer 2

使用当前的材料 - UI，如果您使用的是 keyboardDatePicker ，那么以下功能将起作用

import { KeyboardDatePicker } from '@material-ui/pickers';
<KeyboardDatePicker
  // other props
  disableFuture={true}
/>

Answer 3

您可以在材料UI中使用<TextField>组件，只需给它一个type=date即可。如果要使用最小或最大属性，则必须通过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

您可以使用 datePicker 和 keyboardDatePicker

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