如何使用 Material ui reactjs 从今天开始禁用过去的日期？

Question

我正在使用反应材料 ui 创建日期范围选择器。 此功能背后的逻辑是选择所需日期，如果已选择所需日期，则禁用所选日期中的所有过去日期。 如何实现这个反应材料ui？

这是我的代码，

import React from 'react';
import {render} from 'react-dom';
import DatePicker from 'material-ui/DatePicker';

function disablePrevDates(date) {
  return date.getDay() === 0;
}

class App extends React.Component {
    render() {
        return (
            <div>
                <DatePicker hintText="Check-in" shouldDisableDate={disablePrevDates} />
            </div>
        )
    }
}

export default App;

Answer 1

这里是：

 import React from 'react'; import DatePicker from 'material-ui/DatePicker'; function disablePrevDates(startDate) { const startSeconds = Date.parse(startDate); return (date) => { return Date.parse(date) < startSeconds; } } class App extends React.Component { render() { const startDate = new Date(); // or: // const startDate = new Date('December 20, 2016'); // const startDate = this.state.firstDate; return ( <div> <DatePicker hintText="Check-in" shouldDisableDate={disablePrevDates(startDate)} /> </div> ) } } export default App;

Answer 2

与您的问题标题有关。

const minDate = new Date(Date.now());

class App extends React.Component {
    render() {
        return (
            <div>
                <DatePicker hintText="Check-in" minDate={minDate} />
            </div>
        )
    }
}

Answer 3

最好的方法是：

class App extends React.Component {
    render() {
        return (
            <div>
                <DatePicker hintText="Check-in" disablePast />
            </div>
        )
    }
}