All Components

Popup

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.

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

Visibility Control

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

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

Animations

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

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

Appending

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.

import { Component } from '@angular/core';
import { SelectionRange } from '@progress/kendo-angular-dateinputs';
import { IntlService } from '@progress/kendo-angular-intl';

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            Selected range: {{ range | json }}
        </div>
        <kendo-daterange>
            <label>
                <span class="label">Start</span>
                <kendo-dateinput kendoDateRangeStartInput [(value)]="range.start"></kendo-dateinput>
            </label>
            <label>
                <span class="label">End</span>
                <kendo-dateinput kendoDateRangeEndInput [(value)]="range.end"></kendo-dateinput>
            </label>
            <kendo-daterange-popup
                [appendTo]="'component'"
            ></kendo-daterange-popup>
        </kendo-daterange>
    `,
    styles: [`
      .label {
        display: block;
        font-weight: bold;
        text-indent: 8px;
        color: #656565;
      }
    `]
})
export class AppComponent {
    public range: SelectionRange = { start: null, end: null };
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
import { AppComponent } from './app.component';

@NgModule({
  bootstrap:    [ AppComponent ],
  declarations: [ AppComponent ],
  imports:      [ BrowserModule, BrowserAnimationsModule, DateInputsModule ]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Aligning

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.

import { Component, ElementRef, ViewChild } from '@angular/core';
import { SelectionRange } from '@progress/kendo-angular-dateinputs';
import { IntlService } from '@progress/kendo-angular-intl';

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

    public range: SelectionRange = { start: null, end: null };
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
import { AppComponent } from './app.component';

@NgModule({
  bootstrap:    [ AppComponent ],
  declarations: [ AppComponent ],
  imports:      [ BrowserModule, BrowserAnimationsModule, DateInputsModule ]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Positioning

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.

import { Component } from '@angular/core';
import { SelectionRange } from '@progress/kendo-angular-dateinputs';
import { IntlService } from '@progress/kendo-angular-intl';

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            Selected range: {{ range | json }}
        </div>
        <kendo-daterange>
            <label>
                <span class="label">Start</span>
                <kendo-dateinput kendoDateRangeStartInput [(value)]="range.start"></kendo-dateinput>
            </label>
            <label>
                <span class="label">End</span>
                <kendo-dateinput kendoDateRangeEndInput [(value)]="range.end"></kendo-dateinput>
            </label>
            <kendo-daterange-popup
                [anchorAlign]="{ horizontal: 'right', vertical: 'top' }"
                [popupAlign]="{ horizontal: 'left', vertical: 'top' }"
            ></kendo-daterange-popup>
        </kendo-daterange>
    `,
    styles: [`
        kendo-daterange {
            display: flex;
            flex-direction: column;
        }
        .label {
            display: block;
            font-weight: bold;
            text-indent: 8px;
            color: #656565;
        }
    `]
})
export class AppComponent {
    public range: SelectionRange = { start: null, end: null };
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
import { AppComponent } from './app.component';

@NgModule({
  bootstrap:    [ AppComponent ],
  declarations: [ AppComponent ],
  imports:      [ BrowserModule, BrowserAnimationsModule, DateInputsModule ]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

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.

import { Component } from '@angular/core';
import { SelectionRange } from '@progress/kendo-angular-dateinputs';

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            Selected range: {{ range | json }}
        </div>
        <kendo-daterange>
            <label>
                <span class="label">Start</span>
                <kendo-dateinput kendoDateRangeStartInput [(value)]="range.start"></kendo-dateinput>
            </label>
            <label>
                <span class="label">End</span>
                <kendo-dateinput #endDateInput kendoDateRangeEndInput [(value)]="range.end"></kendo-dateinput>
            </label>
            <kendo-daterange-popup>
                <ng-template kendoDateRangePopupTemplate>
                    <h4>Popup Template</h4>
                    <kendo-multiviewcalendar kendoDateRangeSelection>
                    </kendo-multiviewcalendar>
                </ng-template>
            </kendo-daterange-popup>
        </kendo-daterange>
    `,
    styles: [`
      .label {
        display: block;
        font-weight: bold;
        text-indent: 8px;
        color: #656565;
      }
    `]
})
export class AppComponent {
    public range: SelectionRange = { start: null, end: null };
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
import { AppComponent } from './app.component';

@NgModule({
  bootstrap:    [ AppComponent ],
  declarations: [ AppComponent ],
  imports:      [ BrowserModule, BrowserAnimationsModule, DateInputsModule ]
})

export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
In this article