Date Limits

The DatePicker can display a date range between predefined min and max values, allowing the user to pick a date only from that range.

To enable the user to select a date range, use the KendoReact DateRangePicker component.

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 value of the DatePicker to a certain date range.

class App extends React.Component {
    min = new Date(2000, 2, 10);
    max = new Date(2002, 2, 10);
    defaultValue = new Date(2001, 2, 10);

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