React Datepicker exclude past dates

Question

I'm using this lib in my app:

There is an excludeDates prop which I can use, where I can pass a list of dates aka this would exclude today and yesterday:

excludeDates={[moment(), moment().subtract(1, "days")]}

I would prefer to have a better way than passing however many hundreds of dates into that array though.

Thanks!

score 36 · Accepted Answer · edited Jul 29 '19 at 22:20

36

Maybe you can use the component like that:

<DatePicker
  selected={this.state.startDate}
  onChange={this.handleChange}
  minDate={moment().toDate()}
  placeholderText="Select a day"
/>

You can use minDate and maxDate props to select a unique range of date selectable.

edited Jul 29 '19 at 22:20

Santram Gurjar

3
2

answered May 31 '18 at 14:43

benjamin Rampon

1,316
11
18

score 15 · Answer 2 · answered Jul 26 '19 at 06:35

<DatePicker
selected={this.state.startDate}
onChange={this.handleChange}
minDate={new Date()}
/>

Things are little more simplified now. According to official https://reactdatepicker.com/

we can also use

  maxDate={addDays(new Date(), 5)} // 5 is number of days from today

score 0 · Answer 3 · answered Jul 29 '19 at 14:00

0

Use the following snippet in your code:

<DatePicker
    selected={new Date()}
    onChange={date => handleDateChange(date, field)}
    minDate={moment().toDate()}
/>

answered Jul 29 '19 at 14:00

Shantanu Tripathi

1

Manish Singh Chouhan · Answer 4 · 2022-07-11T11:46:46.230

0

Use The Following according to the Documentation. This works for me. For https://github.com/henninghall/react-native-date-picker this Library.

<DatePicker
selected={new Date()}
onChange={date => dateOnChange(date, field)}
minimumdate={moment().toDate()} // Use minimumdate in Place of minDate. 
 // maximumDate= 'Customize it according to requirement' />

edited Jul 11 '22 at 11:46

answered Jul 06 '22 at 01:36

Manish Singh Chouhan

119
1
9

This answer is similar to [this previous answer](https://stackoverflow.com/a/57255471/14051077). (the snippet is nearly identical). Might make more sense to just edit that answer. – Discordian Jul 09 '22 at 22:11
In the Previous they are showing the minDate but I am using the minimumdate for the same. and That works for me. – Manish Singh Chouhan Jul 11 '22 at 11:47
Ah I see, you're using a different library than the question asker. – Discordian Jul 11 '22 at 16:48

score 0 · Answer 5 · answered Jan 15 '23 at 23:43

excludeDates property is not used for this case. It is used for unavailable dates. Let's say you have a booking hotel system and if a user wants to book a new room, you need to show unavailable dates on the date picker calendar. You need to fetch the database, find the booked days for the room and pass it to the exludeDates property

// this will disable the past days
minDate={new Date()}

score 0 · Answer 6 · answered Mar 21 '23 at 08:42

0

you can do something like this to disable past dates from being selectable:

<input type='date' min={new Date().toISOString().split('T')[0]} />

answered Mar 21 '23 at 08:42

anilam

694
6
7

React Datepicker exclude past dates

6 Answers6