• 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

DateRangeEndInputDirective

A directive which manages the end range selection.

You can use the DateRangeEndInputDirective only with a DateInput component.

Selector

[kendoDateRangeEndInput]

Inputs

NameTypeDefaultDescription

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 component does not perform any auto-correction.

navigateCalendarOnFocus

boolean

Specifies the navigation behavior of the calendar when the active end is changed on input focus. When enabled, the calendar navigates to the value of the focused input. Otherwise, the calendar displays the last picked date.

By default, the automatic navigation behavior on input focus is disabled.

@Component({
selector: 'my-app',
template: `
 <h5>Toggle input focus to see the calendar navigating between range ends.</h5>
 <kendo-daterange>
     <kendo-dateinput kendoDateRangeStartInput [navigateCalendarOnFocus]="true" [(value)]="start"></kendo-dateinput>
     <kendo-dateinput kendoDateRangeEndInput [navigateCalendarOnFocus]="true" [(value)]="end"></kendo-dateinput>
 </kendo-daterange>
`
})
export class AppComponent {
  public start: Date = new Date(2018, 3, 10);
  public end: Date = new Date(2018, 10, 20);
}

In this article

Not finding the help you need?