Calendar Picker with readonly

2 posts, 0 answers
  1. Henry
    Henry avatar
    1 posts
    Member since:
    Mar 2020

    Posted 11 Mar Link to this post

    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.

  2. Svetlin
    Admin
    Svetlin avatar
    448 posts

    Posted 12 Mar Link to this post

    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.
Back to Top