Date Inputs / DateRangePicker / Date Ranges
material theme

Date Ranges

The DateRangePicker provides options for limiting the dates it displays to a certain range.

You can control the date ranges by setting the min and max properties.

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

 /