The DateRange component utilizes the MultiViewCalendar component, which enables the selection of date ranges.
By default, the MultiViewCalendar displays a selection range, but does not update that range on user interaction. To enable this functionality, decorate the calendar with the
DateRangeSelection directive. The directive will update the selection range upon user interaction and will toggle the end of the active range.
The following example demonstrates how to define the MultiViewCalendar with a selection range.
DateRangeSelection directive allows you to set a specific date range selection and listen to any changes of that range.
The following example demonstrates how to always select a whole week on click.
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.
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 following example demonstrates how to enforce updates to the end selection range only.