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	'month	Specifies the initial view that the MultiViewCalendar displays when it loads (see example). By default, the active view is month. You have to set activeView within the topView-bottomView range.
adaptiveMode	AdaptiveMode	'none'	Determines whether the component uses adaptive rendering for different screen sizes. By default, adaptive rendering is disabled.
adaptiveSubtitle	string	""	Specifies the subtitle text displayed in the header of the action sheet. Applies only when AdaptiveMode is set to auto.
adaptiveTitle	string	""	Specifies the title text for the input element and the header of the action sheet. Applies only when AdaptiveMode is set to auto.
allowReverse	boolean	false	Determines whether users can select dates in reverse order. When you set allowReverse to true, the component does not validate if the start date comes after the end date.
anchor	ElementRef<any>		Specifies the element that serves as an anchor for the popup. The popup opens next to this element. For more information, refer to the section on aligning to specific components.
anchorAlign	Align		Specifies the alignment point for the anchor element. For more information, refer to the section on positioning.
animate	boolean | PopupAnimation	true	Controls the popup animations. When you set animate to true, the popup displays opening and closing animations. For more information about controlling the popup animations, refer to the article on animations.
animateNavigation	boolean	false	Determines whether to animate transitions when users navigate between views.
appendTo	"root" | ViewContainerRef | "component"	'root'	Specifies where to render the popup container. By default, the popup renders in the root component.
bottomView	CalendarView	'month'	Specifies the lowest view level that users can navigate to (see example).
collision	Collision	{ horizontal: 'fit', vertical: 'flip' }	Configures how the popup behaves when it encounters viewport boundaries. For more information, refer to the article on viewport boundary detection.
disabled	boolean	false	Determines whether the MultiViewCalendar is interactive (see example). When you set disabled to true, users cannot interact with the component.
disabledDates	Date[] | Day[] | (date: Date) => boolean		Specifies the dates in the MultiViewCalendar that you want to disable (see example).
focusedDate	Date		Specifies the focused date of the MultiViewCalendar component. Defines which date receives focus when the component loads (see example). If the MultiViewCalendar is out of the min or max range, it normalizes the defined focusedDate.
margin	Margin		Specifies the margin around the popup in pixels. Creates empty space between the popup and its anchor element.
max	Date	'2099-12-31'	Specifies the maximum date that users can select (see example).
min	Date	'1900-01-01'	Specifies the minimum date that users can select (see example).
popupAlign	Align		Specifies the alignment point for the popup element. For more information, refer to the section on positioning.
showOtherMonthDays	boolean	false	Determines whether to display days from adjacent months in the current month view (see example).
showViewHeader	boolean	false	Determines whether to display a header for each view (see example). For example, displays the month name in the month view.
topView	CalendarView	'century'	Specifies the highest view level that users can navigate to (see example).
views	number	2	Specifies the number of calendar views to display side by side.
weekNumber	boolean	false	Determines whether to display week numbers in the month view (see example).

Fields

Name	Type	Default	Description
calendar	MultiViewCalendarComponent		Gets the active calendar that displays in the popup. When the popup is closed, the property returns null.
isActive	boolean		Gets the active state of the component. Returns true when the opened calendar is active.
show	boolean		Gets or sets the visibility state of the component.

Events

Name	Type	Description
cancel	EventEmitter<null>	Fires when the popup closes due to an ESC keypress or when it leaves the viewport (see example).
close	EventEmitter<PreventableEvent>	Fires when the popup is about to close (see example). You can prevent this event to keep the popup open.
blur	EventEmitter<null>	Fires when the calendar element loses focus (see example).
focus	EventEmitter<null>	Fires when the calendar element receives focus (see example).
open	EventEmitter<PreventableEvent>	Fires when the popup is about to open (see example). You can prevent this event to keep the popup closed.

Methods

activate
Opens the popup component and focuses the calendar.

focus
Focuses the calendar if it is available.

hasActiveContent
Checks if a focused element is inside the popup.
Returns boolean Returns true if the focused element is inside the popup.

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