Reverse Range Selection

By default, the MultiViewCalendar swaps the start and end dates of the value if the end is before the start.

To enable the reverse range selection, set the allowReverse property of the MultiViewCalendar to true.

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>
                <MultiViewCalendar
                    allowReverse={true}
                    onChange={this.handleChange}
                    mode={'range'}
                />
            </div>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
In this article
 /