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 Kendo UI for Vue DateRangePicker component.
Limiting the Date Range
To define the start date, 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 is10th of March, 12:30
and10th of March
is selected in thedate
part, thetime
part will prevent a selection before12:30
. However, if11th of March
is selected, thetime
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.
Limiting the Time Range
To limit the selection of the time
parts only, use the corresponding minTime
and maxTime
properties. This properties allow the developer to limit the time selection only, without taking care of the date
part.
The following example demonstrates how to limit the time
value of the DateTimePicker component, to simulated value selection in work hours only.