All Components

Time Ranges

The TimePicker provides options for displaying time ranges.

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

    selector: 'my-app',
    template: `
        <div class="example-config">
            <p>Only values between {{min | kendoDate:'t'}} and {{max | kendoDate:'t'}} are valid</p>
            <p>Errors: {{ dateModel.errors | json }}</p>
        <div class="example-wrapper">
            <p>Select a time:</p>

class AppComponent {
    public min: Date = new Date(2000, 2, 10, 2, 30);
    public max: Date = new Date(2002, 2, 10, 22, 15);
    public value: Date = new Date(2000, 2, 10, 10, 0);
In this article