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;

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;

• javascript
• html
• reactjs
• material-ui

Share Follow asked Dec 25, 2016 at 17:39 SathyaSathya 1,73433 gold badges3838 silver badges5959 bronze badges 2

• i'd remend using something like moment.js...or try passing in minDate when you instantiate DatePicker. – simsketch Commented Dec 26, 2016 at 15:01
• @Sathya could you check my answer, does it solve your question? If it's not what you're asking about could you give more details what you need? – Oleg Pro Commented Dec 28, 2016 at 5:23

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

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;

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

Best way to do it like :

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