React-day-picker: Disable past dates by default

[tizol]

In most cases we want users to select future dates so it would be nice to have a default feature that disables past dates unless specified otherwise.

For example the date picker from Airbnb has this feature.

isOutsideRange indicates which days are out of selectable range. Past dates out of range by default. If you would like to allow the user to select days in the past, you may set isOutsideRange to () => true. isOutsideRange: PropTypes.func

I was looking through the docs and I did not find an example that shows how to disable past dates. Is there currently a way to disable past dates?

[adidahiya]

I think you should just use the disabledDays prop. react-day-picker probably shouldn't be opinionated about which days users typically select (as a data point, in our usage of react-day-picker, users very rarely select future dates).

[gpbl]

@adidahiya is correct! This will disable the past days:

const today = new Date();
<DayPicker disabledDays={{ before: today }} />,

[tizol]

@adidahiya @gpbl Thanks for the help. It works!

[manjula91]

Can we also disable the dates using DayPickerInput
placeholder="DD/MM/YYYY"
format="DD/MM/YYYY"
onDayChange={day => console.log(day)}
/>

How do i do it in this case?

[gpbl]

@manjula91 use dayPickerProps: http://react-day-picker.js.org/api/DayPickerInput#dayPickerProps

[manjula91]

@gpbl Thanks it works :)

[amanpreet-github]

Hey, if you are using DayPickerInput then the way to disable the past or future dates is very simple.

For disabling the future dates.

<DayPickerInput dayPickerProps={{ disabledDays: {after: new Date()} }} > </DayPickerInput>

For disabling the past dates.

<DayPickerInput dayPickerProps={{ disabledDays: {before: new Date()} }} > </DayPickerInput>

[carlos-peru]

Is there a regression here? <DayPickerInput dayPickerProps={{ disabledDays: {before: new Date()} }} > </DayPickerInput> is not working for me.

[nemanjacosovic]

Here is one more example.

Monday is the first day.
Weekends disabled.
Before today disabled.
Today disabled.

<DayPicker
  firstDayOfWeek={ 1 }
  disabledDays={
    [
      new Date(),
      { daysOfWeek: [0, 6] },
      { before: new Date() }
    ]
  }
/>

This issue is slowly becoming a great documentation page. :)

[alex-resdiary]

Leaving this here for anyone who might be struggling with the component. You need to pass the props into daypicker as follows :

<DayPickerInput
                dayPickerProps={{
                    disabledDays: {
                        before: today,
                    },
                }}/>

[aprzygocki]

I changed mine around a little and the previous posts in this thread helped me with some of that. Thank you, guys.
This turns the previous dates into greyscaled numbers but they can still be selected. :(
Does anyone know how to remedy this?

`import React from 'react';
import DayPicker from 'react-day-picker';

import 'react-day-picker/lib/style.css';

export default class Calendar extends React.Component {
constructor(props) {
super(props);
this.handleDayClick = this.handleDayClick.bind(this);
this.state = {
selectedDay: undefined,
};
}

handleDayClick(day) {
this.setState({ selectedDay: day });
}

render() {
return (

{this.state.selectedDay ? (

You clicked {this.state.selectedDay.toLocaleDateString()}

) : (

Please select a start day.

)}
onDayClick={this.handleDayClick}
selectedDays={this.state.selectedDay}
firstDayOfWeek={ 0 }
disabledDays={
[
{ daysOfWeek: [] },
{ before: new Date()}
]
}
/>

);
}
}`