# Date and Time Ranges

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](https://www.telerik.com/kendo-react-ui/components/dateinputs/daterangepicker).

## Limiting the Date Range

To define the start date, use the [`min`](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/datetimepickerprops#min) property. To define the end date of the range, use the [`max`](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/datetimepickerprops#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.

[Demo Source](https://demos.telerik.com/kendo-react-ui/dateinputs/datetimepicker/ranges/date/func/source.txt)

## Limiting the Time Range

To limit the selection of the `time` parts only, use the corresponding [`minTime`](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/datetimepickerprops#mintime) and [`maxTime`](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/datetimepickerprops#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.

[Demo Source](https://demos.telerik.com/kendo-react-ui/dateinputs/datetimepicker/ranges/time/func/source.txt)

## Suggested Links

* [API Reference of the DateTimePicker](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/datetimepicker)
* [React Date Inputs](https://www.telerik.com/kendo-react-ui/components/dateinputs)