Calendar Picker with readonly

[Henry]

Hi,

I am trying to create a kendo calendar picker but I do not want to have any input-field action firing. I would love to just open the calendar without being able to access any input fields. This is because we are using a custom touch device and the opening of the keyboard simultanously with the calendar ist quite distracting (it opens because the input field is focussed after selecting a date). Is it possible to make the input readonly but still have an input possibility using the calendar picker?

Thanks in advance.

[Svet]

Hi Henry,

Thank you for reaching out to us.

What could be done in order to achieve the required behavior is to style the input of the DatePicker by applying some custom CSS like the following:

encapsulation: ViewEncapsulation.None,

    styles: [`

    .k-widget.k-dateinput{

      pointer-events: none;

      opacity: 0.9; 

    }

 

Then the blur() method of the DatePicker component could also be called on the (valueChange) event.

Please check the following example demonstrating both suggestions:

https://stackblitz.com/edit/angular-5l9xuq?file=app/app.component.ts

Such approach will disable the input of the DatePicker and will allow to open the popup with the Calendar only when clicking the icon next to the input.

I hope the provided information helps. Feel free to write back in case any further assistance is required for this case. Thank you in advance.

Regards,
Svetlin
Progress Telerik