How to disable text input while opening popup with click

3 posts, 0 answers
  1. Eric
    Eric avatar
    24 posts
    Member since:
    Dec 2010

    Posted 27 May 2020 Link to this post

    I have declared a DatePicker.  Normally, the popup would only open when the user clicks the button and the user can free hand a date into the text field.  I want to alter these two behaviors.


    1. When the user mouse clicks anywhere on the DatePicker, even in the text field, the popup opens.

    2. Prevent the user from typing anything into the text field.  The user will be forced to use the popup to select a date.

  2. Anton Mironov
    Anton Mironov avatar
    168 posts

    Posted 29 May 2020 Link to this post

    Hello, Eric,

    In order to implement this behavior, a good approach is to attach a click event to the input of the datepicker. This could happen in the document.ready event. Here is an example:

        $(document).ready(function () {
            //Handle the click event
            $("#datepicker").click(function () {
                //Disable editing via the input
                $("#datepicker").attr('disabled', true);
                //Select the element and open it
                var datepicker = $("#datepicker").data("kendoDatePicker");
                //Enable editing into the popup
                $("#datepicker").attr('disabled', false);

    Please let me know if you have any other questions.

    Best Regards,
    Anton Mironov
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
  3. Eric
    Eric avatar
    24 posts
    Member since:
    Dec 2010

    Posted 29 May 2020 in reply to Anton Mironov Link to this post

    That didn't quite do it, but I was able to make some slight modifications to your suggestion to get what I wanted.  Thanks.
    // need to disable typing input, so have to rely on popup button.
    // do not use datepicker.enable(false), because that would disable the button, too, and we
    // only want to disable the textbox
    $("#tdpEncounterDate").prop("readonly", true);
    $("#tdpEncounterDate").click(function () {
        // make the popup open whenever the text field is clicked
        var datepicker = $("#tdpEncounterDate").data("kendoDatePicker");;
Back to Top