All Components

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.

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            Selected range: {{ range | json }}
        </div>
        <h3>Auto-correct on blur</h3>
        <i>Type a start date after the end date</i><br>
        <kendo-daterange>
            <label>
                <span class="label">Start</span>
                <kendo-dateinput kendoDateRangeStartInput autoCorrectOn="blur" [(value)]="range.start"></kendo-dateinput>
            </label>
            <label>
                <span class="label">End</span>
                <kendo-dateinput kendoDateRangeEndInput autoCorrectOn="blur" [(value)]="range.end"></kendo-dateinput>
            </label>
        </kendo-daterange>
    `,
    styles: [`
      .label {
        display: block;
        font-weight: bold;
        text-indent: 8px;
        color: #656565;
      }
    `]
})
class AppComponent {
    public range = {
        start: new Date(2018, 10, 10),
        end: new Date(2018, 10, 12)
    };
}

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.

@Component({
selector: 'my-app',
template: `
<div class="example-config">
    Selected range: {{ range | json }}
</div>
<h3>Auto-correct on blur</h3>
<div style="margin-bottom: 1em;">
    <i>Pick a start date after the end date and click outside to blur the element</i><br>
    <kendo-multiviewcalendar
        kendoDateRangeSelection
        autoCorrectOn="blur"
        [(selectionRange)]="range"
    ></kendo-multiviewcalendar>
</div>

<h3>Disabled auto-correction</h3>
<i>Pick a start date after the end date</i><br>
<kendo-multiviewcalendar
    kendoDateRangeSelection
    autoCorrectOn="none"
    [(selectionRange)]="range"
></kendo-multiviewcalendar>
`
})
class AppComponent {
    public range = { start: new Date(2018, 10, 10), end: new Date(2018, 10, 12) };
}
In this article