CustomizationPremium
The DateRangePicker enables the user to render custom components instead of the default ones and, in this way, to customize most of the child DateRangePicker components which are otherwise inaccessible.
While you can control the child components through the props of the DateRangePicker, the suggested approaches allow you to completely replace and have full control over them.
The user can replace the following DateRangePicker components with custom ones:
- Start and end Date Inputs—Render the inputs for the
startandendrange selection of the DateRangePicker. Calendar—Renders the MultiViewCalendar inside the popup of the DateRangePicker.Popup—Renders the popup which contains the MultiViewCalendar.
Customizing the Date Inputs
The DateRangePicker accepts an object of type SelectionRange as a value. Each DateInput expects you to pass start and end values. To override the components that are responsible for the date input, provide either a startDateInput or an endDateInput property and pass a custom component.
The following example demonstrates how to use different DateInput components for the start and end values of the DateRangePicker.
Customizing the Calendar
By default, the DateRangePicker renders a MultiViewCalendar in a range-selection mode. To override the component that is responsible for the range selection, set the calendar property to a custom component.
The following example demonstrates how to use two different Calendars instead of a single MultiViewCalendar in a range mode.
Customizing the Popup
The Popup component inside the DateRangePicker acts as a container element with an absolute position. The Popup is displayed on focus and is hidden on blur. To override the component that is responsible for containing the Calendar, set the popup property to a custom component.
The following example demonstrates how to override some of the Popup properties.