Question

我正在使用material-ui Date-Picker。如何禁用今天之前的过去几天？

 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>
)

Answer 1

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

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

Answer 2

使用disablePast。

<DatePicker
    disablePast
/>

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

Answer 3

我们可以将minDate作为道具提供给DatePicker材质UI组件

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

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

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

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

3 个答案: