Date and Time Limits

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

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

To define the start date and time ranges, use the min property. To define the end date of the range, use the max property. When the DateTimePicker renders the ranges, it will take into account both date and time parts. The min value has to be lower than the max value.

If the min value is 10th of March, 12:30 and 10th of March is selected in the date part, the time part will prevent a selection before 12:30. However, if 11th of March is selected, the time part will allow any selection of time.

The following example demonstrates how to limit the value of the DateTimePicker to a certain date and time range.

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

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

In this article

 /