How do I disable future dates in reactjs? - reactjs

Question

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!

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

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

Answer 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.

Answer 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

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

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

Answer 7

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

Answer 8

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