Exclude future dates from a given date using React Datepicker

Question

When using the React Datepicker library with Moment.js to manipulate dates, one can exclude given days as captured below and described in the React Datepicker documentation;

// Exclude today and yesterday.
excludeDates = {[moment(), moment().subtract(1, "days")]}

How can I exclude future dates from a given date?

score 18 · Accepted Answer · edited Jan 22 '20 at 06:28

18

You can use filterDate check and return true if the date is in past.

The snippet below illustrates how to use filterDate;

<DatePicker
  selected = {this.state.date}
  onChange = {this.handleChange}
  filterDate = {(date) => {
    return moment() > date;
  }}
  placeholderText = "Select a weekday"
/>

edited Jan 22 '20 at 06:28

nyedidikeke

6,899
7
44
59

answered May 13 '18 at 20:48

Zohaib Ijaz

21,926
7
38
60

I've used the following to disable future dates (from today onwards): filterDate={date => { return new Date() > date; }} – call0fcode Jun 22 '22 at 19:06

score 0 · Answer 2 · answered Oct 09 '20 at 19:11

You can use Datepicker's minDate & maxDate options.

Eg: if you want to exclude all the dates after 10 days,

<DatePicker
selected={new Date()}
onChange={this.handleChange}
maxDate={addDays(new Date(), 10)}
/>

If you want to exclude all past dates and dates after 10 days.

<DatePicker
selected={new Date()}
onChange={this.handleChange}
minDate={new Date()}
maxDate={addDays(new Date(), 10)}
/>

Exclude future dates from a given date using React Datepicker

2 Answers2