Html Kendo UI Datepicker 禁用输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17435861/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Kendo UI Datepicker disable typing
提问by Pejman
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?
我希望用户只能通过其按钮并从弹出窗口中选择日期来更改 Kendo UI Datepicker 值。如何防止用户在 Datepicker 文本框中输入？我可以禁用文本框而不禁用整个控件吗？
回答by Justin Russo
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.
这将禁用键入输入并仍然允许使用日历控件输入。
回答by Sharad Tripathi
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.
它将禁用键盘输入。同样的方式也可以处理其他条件。
回答by amol
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);
回答by AntouanK
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)
（在剑道演示网站http://demos.kendoui.com/web/datepicker/index.html上尝试过 ）
回答by Jaimin
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");
回答by Tuthmosis
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.
当然，日期和时间选择器小部件应该可以选择仅使用 UI 而不是通过键盘强制输入......否则它是真正的 DateTime“格式化”噩梦的秘诀！我很惊讶该框架没有为这个明显的用例提供任何内容。
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.
这样用户就无法通过键盘输入值，只能使用下拉日期选择窗口输入格式正确的日期。
回答by George K
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:
与该线程中共享的所有其他解决方案一起，可以创建一个自定义的 Masked DatePicker，它将用户限制为特定的日期格式。查看此操作演示以了解更多详细信息：
**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.
**请注意，Kendo UI 不支持此功能作为内置功能，因此您需要自行承担使用它的风险。好消息是它效果很好，没有已知的副作用。
回答by Jnr
Justin's answer works, but it doesn't prevent a right mouse-click from pasting an incorrect value. You could use the oncontextmenuto prevent a right mouse-click
贾斯汀的回答有效，但它并不能阻止鼠标右键单击粘贴不正确的值。您可以使用oncontextmenu来防止鼠标右键单击
oncontextmenu="return false;"
This would also prevent the number in the calendar from being copied though.
这也可以防止日历中的数字被复制。
回答by user11208372
.HtmlAttributes(new { onkeydown="return false" })
