All Components

Dates

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

The DateRangeModule exposes the following directives:

To interlink the DateInput components, decorate them with either 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.

<kendo-daterange>
    <kendo-dateinput kendoDateRangeStartInput [(value)]="range.start"></kendo-dateinput>
    <kendo-dateinput kendoDateRangeEndInput [(value)]="range.end"></kendo-dateinput>
</kendo-daterange>
In this article