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?
-
Does this answer your question? Kendo UI Datepicker disable typingGiannis– Giannis2020-03-06 08:05:12 +00:00Commented Mar 6, 2020 at 8:05
-
@Giannis, that is for jQuery, How can we implement in Angular?Nagarjuna Reddy– Nagarjuna Reddy2020-03-06 08:06:36 +00:00Commented Mar 6, 2020 at 8:06
-
Just use it the same way: <kendo-datepicker [value]="value" onkeydown="return false;"></kendo-datepicker>Giannis– Giannis2020-03-06 08:10:53 +00:00Commented Mar 6, 2020 at 8:10
-
I tried but not working. I can able to change textbox value. I want to disable textboxNagarjuna Reddy– Nagarjuna Reddy2020-03-06 08:16:47 +00:00Commented Mar 6, 2020 at 8:16
-
Please take a look here: stackblitz.com/edit/angular-rzcsdw?file=app/app.component.ts Is that what you actually want to achieve?Giannis– Giannis2020-03-06 08:25:40 +00:00Commented Mar 6, 2020 at 8:25
|
Show 9 more comments
2 Answers
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.
Comments
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/
Comments
