• 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
    • Layout
    • 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

DateRangeSelectionDirective

A directive which manages the MultiViewCalendar range selection.

Selector

[kendoDateRangeSelection]

Inputs

NameTypeDefaultDescription

activeRangeEnd

SelectionRangeEnd

Specifies which end of the selection range will be marked as active. The active end gets modified upon user interaction. When a new active end is set, the wired DateRangeService notifies all related components. For example, the start and end DateInput components.

If the selection range is undefined, the value is ignored.

autoCorrectOn

AutoCorrectOn

Specifies the auto-correction behavior. If the start date is greater than the end date, the directive fixes the date range to a single date either on input change or on blur (see example).

By default, the auto-correction is triggered on change. To disable this behavior, set the autoCorrectOn property to none.

selectionRange

SelectionRange

Gets or sets the selection range of the calendar. When a new range is set, the connected DateRangeService notifies all related parties.

Events

NameTypeDescription

activeRangeEndChange

EventEmitter<SelectionRangeEnd>

Fires when the active range end is changed. For more information, refer to the section on events.

selectionRangeChange

EventEmitter<SelectionRange>

Fires when the selection range is changed. For more information, refer to the section on events.

Methods

setRange

Parameters

range?

SelectionRange

In this article

Not finding the help you need?