Kendo UI Datepicker disable typing

Question

I want users to be able to change a Kendo UI Datepicker value only through its button and selecting the date from the pop-up. How can I prevent users from typing in the Date

Answer 1

Find your input element, and disable it

$('#datepicker').attr('disabled','disabled');

( tried it on the kendo demo website http://demos.kendoui.com/web/datepicker/index.html )

Answer 2

for tagHelpers just use following

output.Attributes.Add("onkeydown", "javascript:return false;");

Answer 3

you can do it by two ways

  //disable kendo ui  datapicker click event
    $(".k-datepicker input").bind('click dblclick',function () {
         return false;
    });

    //make it readonly
   $(".k-datepicker input").prop("readonly", true);

Answer 4

If you want prevent user to typing date in date picker and only select date from pop-up try this code

$(".k-datepicker").find('span').find('input').attr("readonly", "readonly");

Answer 5

Use the control as below-

@(Html.Kendo().DatePicker()
.Name("FromDate")
.HtmlAttributes(onkeydown="javascript:return false;" })
      )

It will disable keyboard typing. Same way other conditions also can be handled.

Answer 6

Of course, the date and time picker widget should have the option to force input only with UI and not by keyboard... Otherwise it's a recipe for a real DateTime "formating" nightmare ! I am quite surprised that the framework doesn't provide anything for this obvious use case.

I had the same need and got it to work using the following logic:

$("#date").kendoDatePicker({
    format: "dd MMMM yyyy"
});
$("#date").attr("readonly","readonly");

That way the user cannot enter a value by keyboard and can only input a well formated date using the dropdown date selection window.