The DateRange popup displays a MultiViewCalendar next to the initially loaded DateInput by utilizing the DateRangePopup component.

The DateRangePopup is registered into the common DateRangeService instance of the DateRange. In this way, it renders a notification about changes in the start and end dates within the selected date range.

By default, the visibility of the DateRange popup is controlled by the DateRangeStartInputDirective or DateRangeEndInputDirective inputs. When the user focuses either of the inputs, the DateRange popup will appear. When the user moves the focus away from both inputs or from the calendar, the DateRange popup will close.

Basic Usage

The following example demonstrates the DateRangePopup component in action.

View Source
Edit In Stackblitz  
Change Theme:

Visibility Control

To show or hide the popup, use the toggle method.

selector: 'my-app',
template: `
    <button #anchor (click)="popup.toggle()">Toggle DateRangePopup</button>
    <kendo-daterange-popup #popup [anchor]="anchor"></kendo-daterange-popup>
export class AppComponent { }


The DateRangePopup component exposes the configuration of the Popup animations. To control the behavior of its animations, use the animate property.

    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>
            <kendo-daterange-popup [animate]="{ type: 'fade' }"></kendo-daterange-popup>
    styles: [`
      .label {
        display: block;
        font-weight: bold;
        text-indent: 8px;
        color: #656565;
export class AppComponent {
    public range = { start: null, end: null };


By default, the DateRangePopup appends the Popup to the first root component which is available in the ApplicationRef class. To change this behavior, use the appendTo option.


The DateRangePopup allows you to change the anchor of the Popup by using the anchor property. By default, the anchor is set to the DateInput which is decorated with the DateRangeStartInputDirective.


The DateRangePopup exposes the positioning configuration of the Popup and allows you to align the Popup and the anchor based on nine pivot points. To change the anchor pivot points, use the anchorAlign option. To change the Popup pivot point, use the popupAlign option.

Rendering the Content

The DateRangePopup renders a default MultiViewCalendar component. To manage the content of the Popup and render different or additional content, use an Angular template which is decorated with the kendoDateRangePopupTemplate directive.

In order for the MultiViewCalendar to update the selection range, decorate the component with the DateRangeSelection directive.