How to disable/enable kendo-daterange programmatically? (without JQuery)

Question

I have the following template

and it works fine. The daterange is disabled. But if I remove these inline "disabled" attributes and if I want to disable/enable it via the button click programmatically, it doesn't work even though "disabled" attribute will be added into the elements.

How can I do this?

Answer 1

Use property binding syntax instead of using toggleAttribute :

Something like this:

<kendo-dateinput ... [disabled]="somePropertyOnYourComponent" ></kendo-dateinput>

And then in test :

test() {
  ...
  somePropertyOnYourComponent = true;
}

Answer 2

The approach with property binding works fine but if for whatever reason you want to use plain JS (TS) you need to disable/enable 4 elements (2 kendo-dateinput and 2 autogenerated by kendo internal inputs)