'Kendo UI for Angular: Kendo UI Datepicker disable typing/ only textbox section
I am trying to implement a Kendo UI Datepicker. Date value should be changed only through its button and selecting the date from the pop-up. How can I prevent users from typing in the Datepicker textbox? Can I disable the textbox without disabling the whole control?
Solution 1:[1]
As already mentioned in my comments, you can prevent users from typing in the Datepicker textbox just using onkeydown="return false;". In that case, the user will still be able to use the mouse and/or the arrows.
If you actually want to disable the Datepicker textbox 'part' of the control, you have to do it programmatically as the [disabled]="true" property will disable the entire control.
The key points are the following:
html
<kendo-datepicker #datepicker [value]="value"></kendo-datepicker>
ts
this.datepickerRef.element.nativeElement.children[0].children[0].setAttribute('disabled', true);
I have prepared a demo. Please take a look here: https://stackblitz.com/edit/angular-rzcsdw?file=app/app.component.ts and let me know if this is the desired functionality.
Solution 2:[2]
I'm a couple of years late on this, but there's a directive you can use for this, readOnlyInput:
<kendo-datepicker [readOnlyInput]="true" [value]="value">
https://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/readonly-state/
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Giannis |
| Solution 2 | Timbo773 |