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—Renders the input field in the DateTimePicker.Calendar—Renders the Calendar inside the popup week column of the DateTimePicker.Popup—Renders 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.
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.
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.
