This is a migrated thread and some comments may be shown as answers.
Calendar Picker with readonly
1 Answer 12 Views
This is a migrated thread and some comments may be shown as answers.
Henry
Top achievements
Rank 1
Henry asked on 11 Mar 2020, 04:02 PM

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.

1 Answer, 1 is accepted

Sort by
0
Svet
Telerik team
answered on 12 Mar 2020, 03:55 PM

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

Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Asked by
Henry
Top achievements
Rank 1
Answers by
Svet
Telerik team
Share this question
or