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—Renders the input field in the DatePicker.Calendar—Renders the Calendar inside the popup week column of the DatePicker.Popup—Renders the popup which contains the Calendar.ToggleButton—Render the button which toggles theshowstate of the DatePicker.
Customizing the DateInput
The DatePicker and the DateInput components communicate through the 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.
Customizing the Calendar
The DatePicker 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.
For more information about the different customization options of the Calendar refer to the Calendar customizations article.
The following example demonstrates how to replace the default Calendar with a MultiViewCalendar from the @progress/kendo-react-dateinputs package. To achieve a clear rendering, set the views property to 1.
Customizing the Popup
The Popup component inside the DatePicker acts as a container element with an absolute position. The DatePicker changes the 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 property. You can completely override the Popup by passing a custom popup through the popup property.
The following example demonstrates how to disable the animation of the Popup using popupSettings.
Customizing the Toggle Button
The 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.