Read-Only TimePicker

By default, the TimePicker is in an active state.

To render the TimePicker into a read-only state, set its readonly property to true.

@Component({
    selector: 'my-app',
    template: `
        <div class="example-wrapper">
            <p>Select a time value:</p>
            <kendo-timepicker
                [readonly]="true"
                [value]="value"
            >
            </kendo-timepicker>
        </div>
    `
})
export class AppComponent {
    public value: Date = new Date(2000, 2, 10, 0, 0, 0);
}

Read-Only Input

The TimePicker provides the option to render just the input in a read-only state, allowing the user to choose a time value only from the popup. To achieve this, set the TimePicker readOnlyInput property to true.

Note that if you set the readonly property value to true, the input will be rendered in
a read-only state regardless of the readOnlyInput value.

@Component({
    selector: 'my-app',
    template: `
        <div class="example-wrapper">
            <p>Select a time value:</p>
            <kendo-timepicker
                [readOnlyInput]="true"
                [value]="value"
            >
            </kendo-timepicker>
        </div>
    `
})
export class AppComponent {
    public value: Date = new Date(2000, 2, 10);
}

In this article