• Getting Started
  • Components
    • Barcodes
    • Buttonsupdated
    • Chartsupdated
    • Conversational UIupdated
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogsupdated
    • Drawing
    • Dropdownsupdated
    • Editorupdated
    • Excel Export
    • File Saver
    • Filter
    • Ganttupdated
    • Gauges
    • Gridupdated
    • Iconsupdated
    • Indicators
    • Inputsupdated
    • Labels
    • Layoutupdated
    • ListBoxupdated
    • ListView
    • Mapbeta
    • Menusupdated
    • Navigationupdated
    • Notification
    • Pagerupdated
    • PDF Export
    • PivotGridupdated
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollViewupdated
    • Sortableupdated
    • ToolBarupdated
    • Tooltipsupdated
    • TreeList
    • TreeView
    • Typography
    • Uploadsupdated
    • Utilitiesupdated
  • 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

Popup Options

The DateRange popup displays a MultiViewCalendar next to the initially loaded DateInput by utilizing the DateRangePopup component.

The DateRangePopup is registered into the common DateRangeService instance of the DateRange. In this way, it renders a notification about changes in the start and end dates within the selected date range.

By default, the visibility of the DateRange popup is controlled by the DateRangeStartInputDirective or DateRangeEndInputDirective inputs. When the user focuses either of the inputs, the DateRange popup will appear. When the user moves the focus away from both inputs or from the calendar, the DateRange popup will close.

The following example demonstrates the DateRangePopup component in action.

View Source
Change Theme:

Visibility Control

To show or hide the popup, use the toggle method.

View Source
Change Theme:


The DateRangePopup component exposes the configuration of the Popup animations. To control the behavior of its animations, use the animate property.

View Source
Change Theme:


By default, the DateRangePopup appends the Popup to the first root component which is available in the ApplicationRef class. To change this behavior, use the appendTo option.

View Source
Change Theme:


The DateRangePopup allows you to change the anchor of the Popup by using the anchor property. By default, the anchor is set to the DateInput which is decorated with the DateRangeStartInputDirective.

View Source
Change Theme:


The DateRangePopup exposes the positioning configuration of the Popup and allows you to align the Popup and the anchor based on nine pivot points. To change the anchor pivot points, use the anchorAlign option. To change the Popup pivot point, use the popupAlign option.

View Source
Change Theme:

Rendering the Content

The DateRangePopup renders a default MultiViewCalendar component. To manage the content of the Popup and render different or additional content, use an Angular template which is decorated with the kendoDateRangePopupTemplate directive.

In order for the MultiViewCalendar to update the selection range, decorate the component with the DateRangeSelection directive.

View Source
Change Theme: