DateRangePopup is registered into the common
DateRangeService instance of the DateRange. In this way, it renders a notification about changes in the start and end dates within the selected date range.
By default, the visibility of the DateRange popup is controlled by the
DateRangeEndInputDirective inputs. When the user focuses either of the inputs, the DateRange popup will appear. When the user moves the focus away from both inputs or from the calendar, the DateRange popup will close.
The following example demonstrates the
DateRangePopup component in action.
To show or hide the popup, use the
By default, the
DateRangePopup appends the Popup to the first root component which is available in the
ApplicationRef class. To change this behavior, use the
DateRangePopup exposes the positioning configuration of the Popup and allows you to align the Popup and the anchor based on nine pivot points. To change the anchor pivot points, use the
anchorAlign option. To change the Popup pivot point, use the
DateRangePopup renders a default
MultiViewCalendar component. To manage the content of the Popup and render different or additional content, use an Angular template which is decorated with the
In order for the MultiViewCalendar to update the selection range, decorate the component with the