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
endrange selection of the DateRangePicker.
Calendar—Renders the MultiViewCalendar inside the popup of the DateRangePicker.
Popup—Renders the popup which contains the MultiViewCalendar.
The DateRangePicker accepts an object of type
SelectionRange as a value. Each DateInput expects you to pass
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
end values of the DateRangePicker.
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 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.