Getting Started with Kendo UI for Angular DateRange

The DateRange component is a container for holding start and end date inputs, and a date range popup.

Basic Usage

The following example demonstrates the DateRange in action.

    selector: 'my-app',
    template: `
        <div class="example-config">
            Selected range: {{ range | json }}
                <span class="label">Start</span>
                <kendo-dateinput kendoDateRangeStartInput [(value)]="range.start"></kendo-dateinput>
                <span class="label">End</span>
                <kendo-dateinput kendoDateRangeEndInput [(value)]="range.end"></kendo-dateinput>
    styles: [`
      .label {
        display: block;
        font-weight: bold;
        text-indent: 8px;
        color: #656565;
class AppComponent {
    public range = { start: null, end: null };

Functionality and Features

In this article