# Customization

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

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

* [`DateInput`](https://www.telerik.com/kendo-vue-ui/components/dateinputs/datepicker/custom-rendering#customizing-the-dateinput)—Renders the input field in the DatePicker.
* [`Calendar`](https://www.telerik.com/kendo-vue-ui/components/dateinputs/datepicker/custom-rendering#customizing-the-calendar)—Renders the Calendar inside the popup week column of the DatePicker.
* [`Popup`](https://www.telerik.com/kendo-vue-ui/components/dateinputs/datepicker/custom-rendering#customizing-the-popup)—Renders the popup which contains the Calendar.
* [`ToggleButton`](https://www.telerik.com/kendo-vue-ui/components/dateinputs/datepicker/custom-rendering#customizing-the-toggle-button)—Render the button which toggles the `show` state of the DatePicker.
* [`PickerWrap`](https://www.telerik.com/kendo-vue-ui/components/dateinputs/datepicker/custom-rendering#customizing-the-picker-wrap)—Render the wrapping element around the `dateInput` and `toggleButton`.

## Customizing the DateInput

The DatePicker and the [DateInput](https://www.telerik.com/kendo-vue-ui/components/dateinputs/api/dateinputprops) components communicate through the [`DateInputChangeEvent`](https://www.telerik.com/kendo-vue-ui/components/dateinputs/api/dateinputchangeevent). For the DatePicker to work correctly with any form of date selection, provide a working `input` which calls the `change` property.

The following example demonstrates how to replace the default DateInput component with three native `<input />` elements. To enable the user only to change a property and not have full control over the rendered content, pass a modified DateInput.

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

## Customizing the Calendar

Similar to the custom rendering of the DateInput, the DatePicker and the [Calendar](https://www.telerik.com/kendo-vue-ui/components/dateinputs/calendar) communicate through the [`CalendarChangeEvent`](https://www.telerik.com/kendo-vue-ui/components/dateinputs/api/calendarchangeevent). You can replace the Calendar with any custom component that provides a date selection and calls [`change`](https://www.telerik.com/kendo-vue-ui/components/dateinputs/api/calendarprops#onchange) with a `Date` value, a vue `event` and an event target.

The following example demonstrates how to replace the default Calendar with a Calendar from the `@progress/kendo-vue-dateinputs` package.

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

## Customizing the Popup

The [Popup](https://www.telerik.com/kendo-vue-ui/components/popup) component inside the DatePicker serves as a container element with an absolute position. The DatePicker changes the [`show`](https://www.telerik.com/kendo-vue-ui/components/popup/api/popupprops#show) property on clicking the **Toggle** button or on `blur`. You can control `show` through the DatePicker.

The following example demonstrates how to further customize the Popup—the complete overriding of the Popup is also possible.

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

## Customizing the Toggle Button

The [ToggleButton](https://www.telerik.com/kendo-vue-ui/components/dateinputs/api/datepickerprops#togglebutton) component inside the DatePicker serves as an initial toggle `button` for opening the calendar, or closing it without `Date` selection.

The following example demonstrates how to further customize the ToggleButton by passing another `icon` as a child.—the complete overriding of the ToggleButton is also possible.

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

## Suggested Links

* [Customize the Color Inside the DatePicker Popup](https://www.telerik.com/kendo-vue-ui/components/knowledge-base/change-datepicker-popup-colors)
* [Customizing the Calendar](https://www.telerik.com/kendo-vue-ui/components/dateinputs/calendar/custom-rendering)
* [API Reference of the DateInput](https://www.telerik.com/kendo-vue-ui/components/dateinputs/api/dateinputprops)
* [API Reference of the Calendar](https://www.telerik.com/kendo-vue-ui/components/dateinputs/api/calendarprops)
* [API Reference of the Popup](https://www.telerik.com/kendo-vue-ui/components/popup/api/popupprops)