DateRangePopupComponent

Represents the Kendo UI DateRangePopup component for Angular.

ts

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
activeView	CalendarView		Defines the active view that the MultiViewCalendar initially renders (see example). By default, the active view is month. You have to set activeView within the topView-bottomView range.
adaptiveMode	AdaptiveMode		Enables or disables the adaptive mode. By default the adaptive rendering is disabled.
allowReverse	boolean	false	Allows reverse selection. If allowReverse is set to true, the component skips the validation of whether the start date is after the end date.
anchor	ElementRef<any>		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.
animateNavigation	boolean	false	Determines whether to enable animation when navigating to previous/next view.
appendTo	"root" | ViewContainerRef | "component"		Controls the popup container. By default, the popup is appended to the root component.
bottomView	CalendarView		Defines the bottommost view, to which the user can navigate (see example).
collision	Collision		Configures the collision behavior of the popup. For more information, refer to the article on viewport boundary detection.
disabled	boolean		Sets or gets the disabled property of the MultiViewCalendar and determines whether the component is active (see example).
disabledDates	Date[] | Day[] | (date: Date) => boolean		Sets the dates of the MultiViewCalendar that will be disabled (see example).
focusedDate	Date		Sets or gets the focusedDate property of the MultiViewCalendar and defines the focused date of the component (see example). If the MultiViewCalendar is out of the min or max range, it normalizes the defined focusedDate.
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.
max	Date		Sets or gets the max property of the MultiViewCalendar and defines the maximum allowed date value. By default, the max value is 2099-12-31.
min	Date		Sets or gets the min property of the MultiViewCalendar and defines the minimum allowed date value. By default, the min value is 1900-1-1.
popupAlign	Align		Specifies the pivot point of the popup. For more information, refer to the section on positioning.
showOtherMonthDays	boolean	false	Displays the days that fall out of the current month (see example).
showViewHeader	boolean	false	Determines whether to display a header for every view (for example the month name).
subtitle	string		Sets the subtitle text rendered in the header of the popup(action sheet). Applicable only when AdaptiveMode is set to auto.
title	string		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 AdaptiveMode is set to auto.
topView	CalendarView		Defines the topmost view, to which the user can navigate.
views	number	2	Sets or gets the views property of the MultiViewCalendar and defines the number of rendered months.
weekNumber	boolean		Determines whether to display a week number column in the month view (see example).

Fields

Name	Type	Default	Description
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

Name	Type	Description
cancel	EventEmitter<null>	Fires each time the popup is closed either on ESC keypress or on leaving the viewport (see example).
close	EventEmitter<PreventableEvent>	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	EventEmitter<null>	Fires each time the calendar element is blurred (see example).
focus	EventEmitter<null>	Fires each time the calendar element is focused (see example).
open	EventEmitter<PreventableEvent>	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.
Returns boolean boolean;

toggle
Toggles the visibility of the popup or actionSheet. If you use the toggle method to show or hide the popup or actionSheet, the open and close events do not fire.
Parameters show? boolean The state of the popup.