Dates

The main purpose of the DateRange is to allow the selection of dates by linking the default DateRangePopup with the Kendo UI for Angular MultiViewCalendar component.

The DateRangeModule exposes the following directives:

• DateRangeComponent—Provides a common DateRangeService instance.
• DateRangePopupComponent—Renders a MultiViewCalendar with enabled range selection inside a popup element.
• DateRangeSelectionDirective—Provides a default range selection implementation to the MultiViewCalendar component and supports mouse and keyboard selection. The DateRangeSelection directive will be deprecated in a future version. We recommend using the MultiViewCalendar range selection.
• DateRangeStartInputDirective—Links the start date input to the date range and updates only the start date on change.
• DateRangeEndInputDirective—Links the end date input to the date range and updates only the end date on change.

To interlink the Date Inputs components, decorate them either with a DateRangeStartInputDirective or a DateRangeEndInputDirective directive.

The following example demonstrates how to enable the date range selection by providing a minimum configuration to the DateRange.

Change Theme

Theme

Loading ...

Suggested Links

• API Reference of the DateRange
• API Reference of the MultiViewCalendar
• DateRangePopupComponent
• DateRangeSelectionDirective
• DateRangeStartInputDirective
• DateRangeEndInputDirective