New to Kendo UI for Angular? Start a free 30-day trial

Auto-Correction

You can configure the DateRangeStartInputDirective, DateRangeEndInputDirective, and DateRangeSelection directives to automatically correct the range of dates that was selected.

When the selected range is invalid, for example, the end date is before the start date, the range will be fixed to a single date.

Input Directives

Both DateRangeStartInputDirective and DateRangeEndInputDirective directives expose an autoCorrectOn option that controls the time when the auto-correct features occurs. By default, the auto-correction is disabled.

The available options are:

  • blur—Updates the range when the input gets blurred.
  • change—Updates the range on every change in the input.
  • none—Disables the auto-correction.

The following example demonstrates how to enable the auto-correction on blur.

Example
View Source
Change Theme:

Calendar Selection Directive

The DateRangeSelection directive is designed to auto-correct the selection range when the MultiViewCalendar changes. To disable the auto-correction, set the autoCorrectOn option to none. By default, auto-correction is triggered on change.

The available options are:

  • blur—Updates the range when the calendar gets blurred.
  • change—Updates the range on every change in the calendar.
  • none—Disables the auto-correction.

The following example demonstrates how to change the auto-correction behavior.

Example
View Source
Change Theme: