# 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-react-ui/components/dateinputs/datepicker/custom-rendering#customizing-the-dateinput)—Renders the input field in the DatePicker.
* [`Calendar`](https://www.telerik.com/kendo-react-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-react-ui/components/dateinputs/datepicker/custom-rendering#customizing-the-popup)—Renders the popup which contains the Calendar.
* [`ToggleButton`](https://www.telerik.com/kendo-react-ui/components/dateinputs/datepicker/custom-rendering#customizing-the-toggle-button)—Render the button which toggles the `show` state of the DatePicker.

## Customizing the DateInput

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

> To enable the user only to change a property and not have full control over the rendered content, pass a modified DateInput.

The following example demonstrates how to add a clear button by modifying the properties of the DateInput.

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

## Customizing the Calendar

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

> For more information about the different customization options of the [Calendar](https://www.telerik.com/kendo-react-ui/components/dateinputs/calendar) refer to the [Calendar customizations](https://www.telerik.com/kendo-react-ui/components/dateinputs/calendar/custom-rendering) article.

The following example demonstrates how to replace the default Calendar with a [`MultiViewCalendar`](https://www.telerik.com/kendo-react-ui/components/dateinputs/multiviewcalendar) from the `@progress/kendo-react-dateinputs` package. To achieve a clear rendering, set the [`views`](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/multiviewcalendarprops#views) property to `1`.

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

## Customizing the Popup

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

You can customize the Popup through the [popupSettings](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/datepickerprops#popupsettings) property. You can completely override the Popup by passing a custom popup through the [popup](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/datepickerprops#popup) property.

The following example demonstrates how to disable the animation of the Popup using [popupSettings](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/datepickerprops#popupsettings).

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

## Customizing the Toggle Button

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

The following example demonstrates how to customize the ToggleButton by passing another `svgIcon`. You can also completely override the ToggleButton.

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

## Suggested Links

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