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.
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.
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.
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.