'How do I disable future dates in reactjs?

I have not use any datepicker still code is working fine. I have selected input type to date and everything's working fine. Now I want to disable future dates. How do I do that?

<div className="form-group col-md-6">
                            <label for="inputDate4">Date of Birth</label>
                            <input type="date" className="form-control" id="inputDate4" placeholder="Date of Birth" name="dob" onChange={this.handleChange} />
                        </div>

Edit: Issue solve by other way

I used React Date Picker

It is so easy to implement. Just install the npm package

npm install react-datepicker --save

Install moment aslo

npm install moment --save

Import the libraries

import DatePicker from 'react-datepicker';
import moment from 'moment';
import 'react-datepicker/dist/react-datepicker.css';

In the constructor

this.state = {
      dob: moment()
    };
    this.dateChange = this.dateChange.bind(this);

dateChange function

dateChange(date) {
    this.setState({
      dob: date
    });
  }

And finally the render function

 <DatePicker
     selected={this.state.dob}
     onChange={this.dateChange}
     className="form-control"
    placeholder="Date of Birth"
    maxDate={new Date()}
    />

Here the maxDate function is used to disable future dates.

maxDate={new Date()}

Source: https://www.npmjs.com/package/react-datepicker

Thank you!

reactjs datepicker

Solution 1:^[1]

You can use a min, max attribute to restrict the date selection within a date range

<div className="form-group col-md-6">
     <label for="inputDate4">Date of Birth</label>
     <input type="date" className="form-control" id="inputDate4" placeholder="Date of Birth" name="dob" onChange={this.handleChange} max={moment().format("YYYY-MM-DD")}/>
</div>

Solution 2:^[2]

The maxDate did the job for me. Try using minDate as well for minimum date selection.

import moment from 'moment';
import DatePicker from 'react-datepicker';

<DatePicker maxDate={moment().toDate()} />

Solution 3:^[3]

var input = new Date ("inputgotBackfromthe user")    
var now = new Date();
if (before < now) {
  // selected date is in the past
}

You need to try converting the input to a date object, after that you can make a new date object and check the input date object is older or not. Remember this will be big, because the users must input it in the right format. If not you will maybe get an exception or a wrong date object.

Solution 4:^[4]

you can use moment.js library for working with date. now for check date is future you can use diff function of moment.js.

                   // today < future (31/01/2014)
today.diff(future) // today - future < 0
future.diff(today) // future - today > 0

Therefore, you have to reverse your condition. If you want to check that all is fine, you can add an extra parameter to the function:

moment().diff(SpecialTo, 'days') // -8 (days)

note:

this won't work if it's a different day but the difference is less than 24 hours

Solution 5:^[5]

I am checking the date selected by comparing it with the current date or precisely with moment() which gives us the value of current time elapsed in seconds from some date in 1970. It will not allow to select any future dates.

handleDateChange(date){
    if(date <= moment()){
        this.setState({
            testDate: date
        });
    }
}

<DatePicker className="form-control" dateFormat="DD/MM/YYYY" id="testDate onChange={this.handleDateChange.bind(this)} onSelect={this.handleSelect}                                                                selected={this.state.testDate}/>

Solution 6:^[6]

<DateTimePicker 
   dateConvention={DateConvention.Date}
   showGoToToday={true}

    onChange={date => this.handleDateChange(date)} 
    placeholder={"Enter Date"}
    showLabels={false} 
    value={this.state.startDate} 
    maxDate={this.props.todaydate}//or use new date()
    //formatDate={this._onFormatDate}                  
 />

Check this - https://pnp.github.io/sp-dev-fx-controls-react/controls/DateTimePicker/

Solution 7:^[7]

import moment from 'moment';

 <
   Input type="date"  
   max={moment().format("DD-MM-YYYY")}
   onChange={(e) => setDOB(e.target.value)}
 />

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Shubham Khatri
Solution 2	Bigyan Paudel
Solution 3	Achraf C.
Solution 4	Soroush Chehresa
Solution 5	Amrit Shrestha
Solution 6	Nimantha
Solution 7	Suraj Poddar

'How do I disable future dates in reactjs?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]