Date and Time Ranges
The DateTimePicker provides options for displaying date and time ranges between predefined min and max values, and allows the user to pick a specific date and time only from that range.
Calendar and TimePicker Ranges
You can control the range of dates by setting the min and max properties. 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.
Preventing Invalid Input
By default, the specified min and max values produce form errors when a value outside the specified range is entered in the input. You can disable this option by setting the rangeValidation property to false.
Alternatively, to prevent typing an out-of-range value, you can render the input in a read-only state, allowing the user to choose a value only from the popup (see example).