• Getting Started
  • Components
    • Barcodes
    • Buttons
    • Chartsupdated
    • Conversational UIupdated
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filter
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBox
    • ListView
    • Map
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PDFViewer
    • PivotGridupdated
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • ToolBar
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploads
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
New to Kendo UI for Angular? Start a free 30-day trial

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

NameTypeDefaultDescription

adaptiveMode

AdaptiveMode

Enables or disables the adaptive mode. By default the adaptive rendering is disabled.

allowReverse

boolean

false

Allows reverse selection when using range 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.

appendTo

"root" | ViewContainerRef | "component"

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.

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.

Fields

NameTypeDefaultDescription

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

NameTypeDescription

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.