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 (see example). This event is preventable. If you cancel the event, the popup will remain open. |
blur |
|
Fires each time the calendar element is blurred (see example). |
focus |
|
Fires each time the calendar element is focused (see example). |
open |
|
Fires each time the popup is about to open (see example). This event is preventable. If you cancel the event, the popup will remain closed. |
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 | ||||||
|
