Date Inputs / DateRangePicker / Date Limits
material theme

Date Limits

The DateRangePicker can limit the date range it displays between predefined min and max values, allowing the user to select dates only within that predefined range.

To define the start date of the range, use the min property. To define the end date of the range, use the max property. The min date value has to be lower than the max date value.

The following example demonstrates how to limit the values of the DateRangePicker to a certain date range.

class App extends React.Component {
    min = new Date(2018, 8, 1);
    max = new Date(2018, 9, 25);
    defaultValue = { start: new Date(2018, 8, 5), end: new Date(2018, 9, 13) };

    render() {
        return (
            <div>
                <div className="example-config">
                    <p>Select a date range:</p>
                    <DateRangePicker
                        min={this.min}
                        max={this.max}
                        defaultValue={this.defaultValue}
                    ></DateRangePicker>
                </div>
            </div>
        )
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
In this article
 /