如何与材料UI Reactjs自今天开始禁用过去的日期

Question

我正在创建使用React材料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>
        )
    }
}