How to disable text input while opening popup with click

[Eric]

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.

[Anton Mironov]

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");
            datepicker.open();

            //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

[Eric]

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");
    datepicker.open();

});