New to KendoReact? Start a free 30-day trial

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:

  • DateInputRenders the input field in the DateTimePicker.
  • CalendarRenders the Calendar inside the popup week column of the DateTimePicker.
  • PopupRenders the popup which contains the Calendar.

Customizing the DateInput

The DateTimePicker and the DateInput components communicate through the 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.

Example
View Source
Edit In Stackblitz  
Change Theme:

Customizing the Calendar

Similar to the custom rendering of the DateInput, the DateTimePicker and the Calendar communicate through the CalendarChangeEvent. You can replace the Calendar with any custom component that provides a date selection and calls 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.

Example
View Source
Edit In Stackblitz  
Change Theme:

Customizing the Popup

The Popup component inside the DateTimePicker acts as a container element with an absolute position. The DateTimePicker changes the 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.

Example
View Source
Edit In Stackblitz  
Change Theme: