CODEWITHSUNDEEP
javascripthtmlreactjsmaterial-ui
Sathya
Sathya

Reputation: 1734

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

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;

Upvotes: 6

Views: 12713

Answers (3)

Ashitosh Shinde
Ashitosh Shinde

Reputation: 1

Best way to do it like :

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

Upvotes: 0

Olivier.h
Olivier.h

Reputation: 51

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

Upvotes: 1

Oleg Pro
Oleg Pro

Reputation: 2543

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;

Upvotes: 7

Related Questions