Date Ranges

The DatePicker provides options for displaying date ranges.

You can control the range of dates by setting the min and max properties. When the min and max properties are configured and the selected date value is out of this range, the component triggers a validation error.

Alternatively, to prevent typing an out-of-range value, you can render the input in a read-only state, allowing the user to choose a value only from the popup Calendar (see example).

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            <p>Only values between {{min | kendoDate:'d'}} and {{max | kendoDate:'d'}} are valid</p>
            <p>Errors: {{ dateModel.errors | json }}</p>
        </div>
        <div class="example-wrapper">
            <p>Select a date:</p>
            <kendo-datepicker
                [min]="min"
                [max]="max"
                [(ngModel)]="value"
                #dateModel="ngModel"
            ></kendo-datepicker>
        </div>
    `
})

class AppComponent {
    public min: Date = new Date(2000, 2, 10);
    public max: Date = new Date(2002, 2, 10);
    public value: Date = new Date(2001, 2, 10);
}

In this article