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.

View Source
Edit In Stackblitz  
Change Theme:

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.

    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 class="example-wrapper">
export class AppComponent {
    public readOnlyInput: boolean = true;
    public value: Date = new Date(2000, 2, 10);

In this article

Not finding the help you need?