How to prevent user from selecting date above end date in react-dates

Question

I'm wondering how I could prevent a user from selecting dates above today's date. For example, today is 3.7 so let that be the highest end date a user could select.

<DateRangePicker
    startDate={this.state.startDate} 
    startDateId="startDate" 
    endDate={this.state.endDate} 
    endDateId="endDate" 
    onDatesChange={({ startDate, endDate }) => {
      this.setState({ startDate, endDate }, () => {});
    }} 
    focusedInput={this.state.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null,
    onFocusChange={focusedInput => this.setState({ focusedInput })} // PropTypes.func.isRequired,
    daySize={50}
    noBorder={true}
    isOutsideRange={() => false}
/>

score 6 · Accepted Answer · answered Jul 04 '19 at 13:45

You should use an isOutsideRange prop and Moment.js for working with available dates ranges. For example, you can allow selecting only dates within a past 30 days this way:

CodeSandbox

import React, { Component } from "react";
import moment from "moment";
import "react-dates/initialize";
import "react-dates/lib/css/_datepicker.css";
import { DateRangePicker } from "react-dates";
import { START_DATE, END_DATE } from "react-dates/constants";

export default class Dates extends Component {
  state = {
    startDate: null,
    endDate: null,
    focusedInput: null
  };

  onDatesChange = ({ startDate, endDate }) =>
    this.setState({ startDate, endDate });

  onFocusChange = focusedInput => this.setState({ focusedInput });

  isOutsideRange = day =>
    day.isAfter(moment()) || day.isBefore(moment().subtract(30, "days"));

  render() {
    const { startDate, endDate, focusedInput } = this.state;

    return (
      <DateRangePicker
        startDate={startDate}
        startDateId={START_DATE}
        endDate={endDate}
        endDateId={END_DATE}
        onDatesChange={this.onDatesChange}
        focusedInput={focusedInput}
        onFocusChange={this.onFocusChange}
        daySize={50}
        noBorder={true}
        isOutsideRange={this.isOutsideRange}
      />
    );
  }
}

score 4 · Answer 2 · answered Oct 21 '19 at 09:20

4

I dont know if you found the solution. But I gave my solution anyway.

You can use import { isInclusivelyBeforeDay } from react-dates and use isOutsideRange={day => !isInclusivelyBeforeDay(day, moment())}

Hope it helps

answered Oct 21 '19 at 09:20

Phú Quốc Đinh

43
6

score 0 · Answer 3 · answered Jul 03 '19 at 14:34

I had a similar issue on another react date picker package. After a bit of reading the documentation for yours (the AirBnb one) I was able to find this issue being mentionned on their GitHub: Set date range #86

It appears there is a prop called isOutsideRange that takes a function. You could return false for any date outside of the current date for example, with just a comparison.

Hope it helps

score 0 · Answer 4 · answered Feb 18 '21 at 19:06

0

function

isOutsideRange(day) {
    return (moment().diff(day) < 0);
  }

...

<DateRangePicker
isOutsideRange={this.isOutsideRange}
>

answered Feb 18 '21 at 19:06

Iryna Zaletka

11

1

Welcome to SO. It is not clear what your question is. Please formulate a proper question, and learn how to format your code a bit better. – Thomas Hirsch Feb 18 '21 at 19:37

score 0 · Answer 5 · edited Mar 03 '22 at 11:10

0

In the latest date range picker version, I just used maxDate={new Date()}. This worked fine to me. This didn't allow me to select more than today.

edited Mar 03 '22 at 11:10

ouflak

2,458
10
44
49

answered Mar 03 '22 at 06:05

Paramesh Waran

1

How to prevent user from selecting date above end date in react-dates

5 Answers5

Linked