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
| Name | Type | Default | Description |
|---|---|---|---|
adaptiveMode |
|
Enables or disables the adaptive mode. By default the adaptive rendering is disabled. | |
anchor |
|
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 |
|
Specifies the anchor pivot point. For more information, refer to the section on positioning. | |
animate |
|
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 |
|
Controls the popup container. By default, the popup is appended to the root component. | |
collision |
|
Configures the collision behavior of the popup. For more information, refer to the article on viewport boundary detection. | |
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 |
|
Specifies the pivot point of the popup. For more information, refer to the section on positioning. | |
subtitle |
|
Sets the subtitle text rendered in the header of the popup(action sheet).
Applicable only when | |
title |
|
Sets the title of the input element of the DateRangePopup and the title text rendered
in the header of the popup(action sheet). Applicable only when |
Fields
| Name | Type | Default | Description |
|---|---|---|---|
calendar |
|
The active calendar that is visible in the popup.
| |
isActive |
|
Gets the active state of the component.
When the opened calendar is active, returns | |
show |
|
Gets or sets the visibility state of the component. |
Events
| Name | Type | Description |
|---|---|---|
cancel |
|
Fires each time the popup is closed either on |
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 |
|
Fires each time the calendar element is blurred. |
focus |
|
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. | ||||
|
toggle | ||||||
|---|---|---|---|---|---|---|
|
Toggles the visibility of the popup or actionSheet.
If you use the | ||||||
|
