Date and Time Ranges
The DateTimePicker provides options for displaying date and time ranges between predefined min and max values, and allow the user to pick a specific date and time only from that range.
You can control the range of dates by setting the
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
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.
By default, the specified
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
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).