Kendo UI Datepicker disable typing

问题

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 Datepicker textbox? Can I disable the textbox without disabling the whole control?

回答1:

On your input element add this attribute and value...

onkeydown="return false;"

This will disable typed input and still allow using the calendar control input.

回答2:

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.

回答3:

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 )

回答4:

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);

回答5:

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");

回答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.

回答7:

Indeed, the widget does not restrict user while typing in the input. The reason for this behavior is explained here: Why widget does not restrict typing

Along with all other solutions shared in this thread, the one can create a custom Masked DatePicker, which will restrict the user to a specific date format. Check this how-to demo for more details:

Create Date Masking

**Note that this is not supported by Kendo UI as a built-in feature, hence you will need to use it on your own risk. The good news is that it works pretty good without known side effects.

回答8:

Justin's answer works, but it doesn't prevent a right mouse-click from pasting an incorrect value. You could use the oncontextmenu to prevent a right mouse-click

oncontextmenu="return false;"

This would also prevent the number in the calendar from being copied though.

回答9:

.HtmlAttributes(new { onkeydown="return false" })

来源：https://stackoverflow.com/questions/17435861/kendo-ui-datepicker-disable-typing

标签

javascript

html

kendo-ui