Read-Only DateTimePicker

By default, the DateTimePicker is in an active state.

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

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            <input type="checkbox" class="k-checkbox" id="readonly" [(ngModel)]="readonly">
            <label class="k-checkbox-label" [attr.for]="'readonly'">Read-only</label>
        </div>
        <div class="example-wrapper">
            <kendo-datetimepicker
                [readonly]="readonly"
            >
            </kendo-datetimepicker>
        </div>
    `
})
export class AppComponent {
    public readonly: boolean = true;
}

Read-Only Input

The DateTimePicker provides the option to render just the input in a read-only state, allowing the user to choose a date only from the popup Calendar. To achieve this, set the DateTimePicker 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-config">
            <input type="checkbox" class="k-checkbox" id="read-only-input" [(ngModel)]="readOnlyInput">
            <label class="k-checkbox-label" [attr.for]="'read-only-input'">Read-only</label>
        </div>
        <div class="example-wrapper">
            <kendo-datetimepicker
                [readOnlyInput]="readOnlyInput"
                [value]="value"
            >
            </kendo-datetimepicker>
        </div>
    `
})
export class AppComponent {
    public readOnlyInput: boolean = true;
    public value: Date = new Date(2000, 2, 10);
}

In this article