How to disable past dates from today date with Material ui reactjs?

Question

I'm creating date range picker with react material ui. My logic behind this functionality is to select required date and if required date has been selected, disable all past dates from selected dates. How to implement this react material ui?

Here is my code,

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

Here it is:

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

Best way to do it like :

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

Answer 3

related to the title of your question.

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

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