如何在 material-ui 日期选择器中禁用过去的日期？答案

【问题标题】：How to disable past dates in material-ui Date picker?如何在 material-ui 日期选择器中禁用过去的日期？
【发布时间】：2017-05-30 16:20:50
【问题描述】：

我正在使用 material-ui 日期选择器。如何禁用今天之前的过去几天？

 import React from 'react';
 import DatePicker from 'material-ui/DatePicker';

function disablePastDays(date) {
  //code here to disable past days
}

const calendar = () => (
    <div>
        <DatePicker shouldDisableDate={disablePastDays}/>
    </div>
)

【问题讨论】：

标签： material-ui

【解决方案1】：

material-ui 的 DatePicker 接受 minDate 属性。所以你可能想要这个：

const today = new Date();
<DatePicker minDate={today}/>

【讨论】：

谢谢 wesley6j
最好把它放在渲染之外，否则每次渲染都会创建一个新日期。
很好！！谢谢:)

【解决方案2】：

使用disablePast。

<DatePicker
    disablePast
/>

他们从v1.0.0-beta.10开始就拥有它。

【讨论】：

也不会禁用时间
这很棒。帮助我只显示当前和未来的日期。

【解决方案3】：

我们可以将 minDate 作为属性赋予 DatePicker 材质 UI 组件

使用 usestate 创建一个 state，然后将 state 值传递给 props，如下所示

const [startMinDate, setStartDate] = useState(new Date())

<DatePicker
      required
      label="Date"
      disablePast                  
      minDate = {startMinDate}
 />

【讨论】：

【解决方案4】：

我正在使用 import DatePicker from '@mui/lab/DatePicker'; 版本库 "@mui/lab": "^5.0.0-alpha.66"

下面的代码对我来说很好用

 <DatePicker
   disablePast
   value={checkout.rideDate}
   onChange={(newValue) => { // your code of onChange functionality}
    />
   }
 />

【讨论】：