Date and Time Ranges

The DateTimePicker provides options for displaying date and time ranges between predefined min and max values, and allow the user to pick a specific date and time only from that range.

Calendar and TimePicker Ranges

You can control the range of dates by setting the min and max properties. When the DateTimePicker renders the ranges, it will take into account both date and time parts. The min value has to be lower than the max value.

If the min value is 10th of March, 12:30 and 10th of March is selected in the date part, the time part will prevent a selection before 12:30. However, if 11th of March is selected, the time part will allow any selection of time.

The following example demonstrates how to limit the value of the DateTimePicker to a certain date and time range.

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            Only values between <strong>{{min | kendoDate:'g'}}</strong> and <strong>{{max | kendoDate:'g'}}</strong> are displayed in the Calendar and the TimePicker.
        </div>
        <div class="example-wrapper">
            <kendo-datetimepicker
                [min]="min"
                [max]="max"
            >
            </kendo-datetimepicker>
        </div>
    `
})
class AppComponent {
    public min: Date = new Date(2019, 2, 10, 12, 30);
    public max: Date = new Date(2019, 2, 15, 12, 30);
}

Forms Range Validation

By default, the specified min and max values produce form errors when a value outside the specified range is entered in the DateInput. You can disable this option by setting the rangeValidation property to false.

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            <p>
                Only values between <strong>{{min | kendoDate:'g'}}</strong> and <strong>{{max | kendoDate:'g'}}</strong> are valid.
            </p>
            <p>
                <input type="checkbox" class="k-checkbox" id="range-validation" [(ngModel)]="rangeValidation" (change)="handeRangeValidationChange()" />
                <label class="k-checkbox-label" [attr.for]="'range-validation'">Forms Range Validation</label>
            </p>
            <div>
                Errors: <strong>{{datetimepicker.errors | json}}</strong>
            </div>
        </div>
        <div class="example-wrapper">
            <kendo-datetimepicker
                #datetimepicker="ngModel"
                [min]="min"
                [max]="max"
                [rangeValidation]="rangeValidation"
                [(ngModel)]="value"
            >
            </kendo-datetimepicker>
        </div>
    `
})
class AppComponent {
    public value: Date;

    public min: Date = new Date(2019, 2, 10, 12, 30);
    public max: Date = new Date(2019, 2, 15, 12, 30);

    public rangeValidation: boolean = true;

    public handeRangeValidationChange(): void {
        if (!this.value) {
            return;
        }

        this.value = new Date(this.value);
    }
}

In this article