1

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?

Giannis
  • 1,790
  • 1
  • 11
  • 29
Nagarjuna Reddy
  • 4,083
  • 14
  • 41
  • 85
  • Does this answer your question? [Kendo UI Datepicker disable typing](https://stackoverflow.com/questions/17435861/kendo-ui-datepicker-disable-typing) – Giannis Mar 06 '20 at 08:05
  • @Giannis, that is for jQuery, How can we implement in Angular? – Nagarjuna Reddy Mar 06 '20 at 08:06
  • Just use it the same way: – Giannis Mar 06 '20 at 08:10
  • I tried but not working. I can able to change textbox value. I want to disable textbox – Nagarjuna Reddy Mar 06 '20 at 08:16
  • Please take a look here: https://stackblitz.com/edit/angular-rzcsdw?file=app/app.component.ts Is that what you actually want to achieve? – Giannis Mar 06 '20 at 08:25
  • keyUp & keyDown shoud not work. Totally textbox should be disabled. Date must selected through pop-up using icon. – Nagarjuna Reddy Mar 06 '20 at 08:27
  • Did you visit the link? I am not sure I can understand the desired functionality. Please check your question once again. You asked about preventing the users from typing in the Datepicker control and letting them change date value only through the button. Is that right? Please check the stackblitz I provided and also show what you have tried so far. – Giannis Mar 06 '20 at 08:34
  • My question was clear. I want to disable only textbox field. I tried **[disabled]="true"** property but it is disabling both icon and textbox. – Nagarjuna Reddy Mar 06 '20 at 08:37
  • So, what's the problem now? Did you check the code here https://stackblitz.com/edit/angular-rzcsdw?file=app/app.component.ts? The user can select a date through the button, but cannot type a date. Is that right? – Giannis Mar 06 '20 at 08:46
  • Yeah you are right but, we can change date through up/down arrow buttons and mousewheel. I want to disable them. – Nagarjuna Reddy Mar 06 '20 at 08:48
  • Alright! So, if you inspect the Datepicker element in your console, you will find out that it is actually a element (what you call the Datepicker textbox) with a element (what you call the Datepicker button). All you need then is to disable the . If I am not that wrong, I think you have to apply either disabled attribute or 'k-state-disabled' class to the . – Giannis Mar 06 '20 at 09:22
  • Yeah I tried with disabled attribute but it is disabling both textbox and date picker button. – Nagarjuna Reddy Mar 06 '20 at 09:24
  • Of course it does. You have to apply the disabled attribute to the and NOT the entire element. I am modifying my demo and will answer your question. – Giannis Mar 06 '20 at 10:45
  • I have modified the demo. Did you check it? – Giannis Mar 06 '20 at 12:20

2 Answers2

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.

Giannis
  • 1,790
  • 1
  • 11
  • 29
0

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/

Timbo773
  • 163
  • 1
  • 12