# Customization

The Kendo UI for Vue DateRangePicker enables the user to render custom components instead of the default ones and, in this way, to customize most of the child DateRangePicker components which are otherwise inaccessible.

While you can [control the child components through the props of the DateRangePicker](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/daterangepicker/child-settings), the suggested approaches allow you to replace them and have full control.

The user can replace the following DateRangePicker components with custom ones:

* [Start and end Date Inputs](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/daterangepicker/custom-rendering#customizing-the-date-inputs)—Render the inputs for the `start` and `end` range selection of the DateRangePicker.
* [`Calendar`](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/daterangepicker/custom-rendering#customizing-the-calendar)—Renders the Calendar inside the popup of the DateRangePicker.
* [`Popup`](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/daterangepicker/custom-rendering#customizing-the-popup)—Renders the popup which contains the Calendar.

## Customizing the Date Inputs

The DateRangePicker accepts an object of type [`SelectionRange`](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/api/selectionrange) as a value. Each DateInput expects you to pass `start` and `end` values. To override the components that are responsible for the date input, provide either a [`startDateInput`](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/api/daterangepickerprops#startdateinput) or an [`endDateInput`](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/api/daterangepickerprops#enddateinput) property and pass a custom component.

The following example demonstrates how to use different DateInput components for the `start` and `end` values of the DateRangePicker.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/dateinputs/daterangepicker/custom/dateinput/source.txt)

## Customizing the Calendar

By default, the DateRangePicker renders a [Calendar](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/api/calendarprops) in a range-selection mode. To override the component that is responsible for the range selection, set the [`calendar`](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/api/daterangepickerprops#calendar) property to a custom component.

The following example demonstrates how to use two different [Calendars](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/calendar) instead of a single [Calendar](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/api/calendarprops) with 2 views in a range mode.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/dateinputs/daterangepicker/custom/calendar/source.txt)

## Customizing the Popup

The [Popup](https://www.telerik.com/kendo-vue-ui-develop/components/popup) component inside the DateRangePicker acts as a container element with an absolute position. The Popup is displayed on `focus` and is hidden on `blur`. To override the component that is responsible for containing the Calendar, set the [`popup`](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/api/daterangepickerprops#popup) property to a custom component.

The following example demonstrates how to override some of the Popup properties.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/dateinputs/daterangepicker/custom/popup/source.txt)

## Suggested Link

* [Customizing the Calendar](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/calendar/custom-rendering)
* [API Reference of the DateInput](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/api/dateinputprops)
* [API Reference of the Calendar](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/api/calendarprops)
* [API Reference of the Popup](https://www.telerik.com/kendo-vue-ui-develop/components/popup/api/popupprops)