Date Limits

The DateInput enables you to set a predefined min-max date range, allowing the user to input a date value only within that range.

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

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 displays a visual indication and does not trigger its onChange event. The min date value has to be lower than the max date value.

The following example demonstrates how to limit the value of the DateInput to a certain date range.

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
 /