Popup Options
The DateRange popup displays a MultiViewCalendar next to the initially loaded DateInput by utilizing the DateRangePopup component.
The 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 DateRangeStartInputDirective or 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.
Visibility Control
To show or hide the popup, use the toggle method.
Animations
The DateRangePopup component exposes the configuration of the Popup animations. To control the behavior of its animations, use the animate property.
Appending
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
appendTo option.
Aligning
The DateRangePopup allows you to change the anchor of the Popup by using the anchor property. By default, the anchor is set to the DateInput which is decorated with the DateRangeStartInputDirective.
Positioning
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 popupAlign option.
Rendering the Content
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 kendoDateRangePopupTemplate directive.
In order for the MultiViewCalendar to update the selection range, decorate the component with the
DateRangeSelectiondirective.
Events
The DateRangePopup emits a number of events which enable you to control its behavior upon user interaction.
The following example demonstrates all events the DateRangePopup features.