Date Ranges

You can control the range of dates in the DateInput by setting the min and max properties.

When the min and max properties are configured and the selected date value is out of this range, the component show visual indication and does not trigger its onChange event.

class App extends React.Component {
    state = { value: new Date(2017, 1, 13) };
    min = new Date(2000, 2, 10);
    max = new Date(2020, 2, 10);

    render() {
        return (
            <div>
                <div className="example-config">
                    <p>Only values between {this.min.toDateString()} and {this.max.toDateString()} are valid</p>
                </div>
                <div className="example-wrapper">
                    <p>Select a date:</p>
                    <DateInput
                        value={this.state.value}
                        max={this.max}
                        min={this.min}
                        onChange={this.changeDate}
                    />
                </div>
            </div>
        );
    }

    changeDate = (event) => {
        this.setState({ value: event.value });
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

In this article

 /