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>
`
})
export 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
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
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
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.