# Customization

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

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

* [`DateInput`](https://www.telerik.com/kendo-react-ui/components/dateinputs/datetimepicker/custom-rendering#customizing-the-dateinput)—Renders the input field in the DateTimePicker.
* [`Calendar`](https://www.telerik.com/kendo-react-ui/components/dateinputs/datetimepicker/custom-rendering#customizing-the-calendar)—Renders the Calendar inside the popup week column of the DateTimePicker.
* [`Popup`](https://www.telerik.com/kendo-react-ui/components/dateinputs/datetimepicker/custom-rendering#customizing-the-popup)—Renders the popup which contains the Calendar.

## Customizing the DateInput

The DateTimePicker 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 DateTimePicker to work correctly with any form of date selection, provide a fully working `input` which calls the `onChange` property coming from the props.

The following example demonstrates how to replace the default DateInput component with three native `<input />` elements.

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

## Customizing the Calendar

Similar to the custom rendering of the DateInput, the DateTimePicker 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.

The following example demonstrates how to replace the default Calendar with a custom Calendar which renders the weekdays with different styles.

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

## Customizing the Popup

The [Popup](https://www.telerik.com/kendo-react-ui/components/popup) component inside the DateTimePicker acts as a container element with an absolute position. The DateTimePicker 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 DateTimePicker.

The following example demonstrates how to customize the alignment of the Popup.

[Demo Source](https://demos.telerik.com/kendo-react-ui/dateinputs/datetimepicker/custom/popup/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 DateTimePicker](https://www.telerik.com/kendo-react-ui/components/dateinputs/api/datetimepickerprops)
* [React Date Inputs](https://www.telerik.com/kendo-react-ui/components/dateinputs)