Date Ranges
The DateRange component utilizes the MultiViewCalendar component, which enables the selection of date ranges.
To enable the MultiViewCalendar range selection, set the selection input property to range. This configuration will update the selection range upon user interaction.
The following example demonstrates how to define the MultiViewCalendar with a selection range.
Calendar Selection Ranges
The DateRangeSelection directive allows you to set a specific date range selection and listen to any changes of that range.
The
DateRangeSelectiondirective will bedeprecatedin a future version. We recommend using the MultiViewCalendarrange selection.
The following example demonstrates how to always select a whole week on click.
Setting Ranges with a Service
The DateRangeService communicates the changes that are performed by the DateRange components and directives.
The following example demonstrates how to propagate a change in the selection range to all relevant DateRange components.
Controlling the Active Selection End
The DateRangeSelection directive allows you to determine the end of the selection range which will be updated. By default, the directive toggles the active selection end on change.
The
DateRangeSelectiondirective will bedeprecatedin a future version. We recommend using the MultiViewCalendarrange selection.
The following example demonstrates how to enforce updates to the end selection range only.