Reverse Selection

By default, the DateRangePicker auto-corrects the selection from its calendar to a range where the start value is always before the end value.

Getting Started

However, the DateRangePicker allows you to implement reverse date-range selection by setting its allowReverse property to true.

The following example demonstrates how to enable the reverse selection from the MultiViewCalendar component.

class App extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            value: {
                start: null,
                end: null
            }
        }
    }

    handleChange = (event) => {
        this.setState({value: event.target.value})
    }

    render() {
        return(
            <div className="example-wrapper">
                <div className="example-config">
                    <p>
                        The value is: <br />
                        start: {String(this.state.value.start)} <br />
                        end: {String(this.state.value.end)}
                    </p>
                </div>
                <DateRangePicker
                    allowReverse
                    onChange={this.handleChange}
                    show={true}
                />
            </div>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

Swapping Start and End Dates in Ranges

Along with the reverse selection logic, you can also render a button to swap the start and end date values. To display the swap button, set the swapButton and allowReverse properties to true.

To enable the reverse selection from the MultiViewCalendar without rendering a swap button, provide the allowReverse property and set the swapButton property to false.

class App extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            value: {
                start: null,
                end: null
            }
        }
    }

    handleChange = (event) => {
        this.setState({value: event.target.value})
    }

    render() {
        return(
            <div className="example-wrapper">
                <div className="example-config">
                    <p>
                        The value is: <br />
                        start: {String(this.state.value.start)} <br />
                        end: {String(this.state.value.end)}
                    </p>
                </div>
                <DateRangePicker
                    allowReverse
                    onChange={this.handleChange}
                    show={true}
                />
            </div>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

In this article