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 to limit the Date selection, or minTime and maxTime to limit only the Time part of the value. When the atleast one of the limiting properties are configured and the selected date value is out of this range, the component displays a visual indication. The min date value has to be lower than the max date value - The same rule applies to the time value of the minTime and maxTime properties.

Limiting the Date Range

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}
                        min={this.min}
                        max={this.max}
                        onChange={this.changeDate}
                    />
                </div>
            </div>
        );
    }

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

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

Limiting the Time Range

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

class App extends React.Component {
    state = { value: new Date(2000, 2, 10, 8, 29) };
    minTime = new Date(2000, 2, 10, 8, 30);
    maxTime = new Date(2000, 2, 10, 17, 30);

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

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

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