DateRangePopupComponent

Represents the Kendo UI DateRangePopup component for Angular.

import { DateInputsModule, DateRangeService } from '@progress/kendo-angular-dateinputs';

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

Selector

kendo-daterange-popup

Export Name

Accessible in templates as #kendoDateRangePopupInstance="kendo-daterange-popup"

Inputs

anchor ElementRef

Specifies the element that will be used as an anchor. The popup opens next to that element.
For more information, refer to the section on
aligning to specific components.

anchorAlign Align

Specifies the anchor pivot point.
For more information, refer to the section on
positioning.

animate boolean | PopupAnimation

Controls the popup animation.
By default, the opening and closing animations are enabled.
For more information about controlling the popup animations,
refer to the article on animations.

appendTo "root" | "component" | ViewContainerRef

Controls the popup container. By default, the popup is appended to the root component.

collision Collision

Configures the collision behavior of the popup.
For more information, refer to the article on
viewport boundary detection.

margin Margin

Specifies the margin value that will be added to the popup dimensions in pixels
and leaves a blank space between the popup and the anchor.

popupAlign Align

Specifies the pivot point of the popup.
For more information, refer to the section on
positioning.

Fields

calendar MultiViewCalendarComponent

The active calendar that is visible in the popup.

When the popup is closed, the property returns null.

isActive boolean

Gets the active state of the component.
When the opened calendar is active, returns true.

show boolean

Gets or sets the visibility state of the component.

Events

cancel EventEmitter<null>

Fires each time the popup is closed either on ESC keypress or on leaving the viewport.

close EventEmitter<PreventableEvent>

Fires each time the popup is about to close.
This event is preventable. If you cancel the event, the popup will remain open.
For more information, refer to the section on
events.

blur EventEmitter<null>

Fires each time the calendar element is blurred.

focus EventEmitter<null>

Fires each time the calendar element is focused.

open EventEmitter<PreventableEvent>

Fires each time the popup is about to open.
This event is preventable. If you cancel the event, the popup will remain closed.
For more information, refer to the section on
events.

Methods

activate

Opens the popup component and focuses the calendar.

focus

Focuses the calendar (if available).

hasActiveContent

Checks if a focused element ids placed inside the popup.

Returns

boolean boolean;

toggle

Toggles the visibility of the popup.
If you use the toggle method to show or hide the popup,
the open and close events do not fire.

Parameters

show? boolean

The state of the popup.