Reverse Range Selection

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

To enable reverse range selection, set its allowReverse property 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