javascriptreactjsdate-rangereact-dates

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


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

Solution

  • 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}
          />
        );
      }
    }