CODEWITHSUNDEEP
reactjsdatepicker
Karan Patokar
Karan Patokar

Reputation: 503

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!

Upvotes: 11

Views: 40449

Answers (8)

Yug Khatri
Yug Khatri

Reputation: 11

PS: Ignore the classes

Use the Date class to get the current date and then use the max prop and give it a value of current date.

const DatePicker = () => {

        let curr = new Date();
        curr.setDate(curr.getDate());
        let date = curr.toISOString().substring(0, 10);

        return (
            <div className="flex items-center text-center justify-center">
                <div className="form-control">
                    <label className="input-group input-group-vertical">
                        <input type="date" className="input text-primary bg-neutral-focus font-bold input-group-sm" defaultValue={date} max={date} />
                    </label>
                </div>
            </div>
        )
    }

Upvotes: 0

Suraj Poddar
Suraj Poddar

Reputation: 1

import moment from 'moment';

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

Upvotes: 0

AYUSH CHAUDHARY
AYUSH CHAUDHARY

Reputation: 55

<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/

Upvotes: 0

Bigyan Paudel
Bigyan Paudel

Reputation: 185

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

Upvotes: 5

Akash More
Akash More

Reputation: 72

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

Upvotes: 0

Soroush Chehresa
Soroush Chehresa

Reputation: 5678

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

Upvotes: 0

Achraf C.
Achraf C.

Reputation: 427

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.

Upvotes: 0

Shubham Khatri
Shubham Khatri

Reputation: 281656

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>

Upvotes: 14

Related Questions