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);
}

Prevent Invalid Input

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

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 (see example).

@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" />
                <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;
}

In this article