36

我希望用户能够仅通过其按钮更改 Kendo UI Datepicker 值并从弹出窗口中选择日期。如何防止用户在 Datepicker 文本框中输入内容？我可以在不禁用整个控件的情况下禁用文本框吗？

4

11 回答 11

56

在您的输入元素上添加此属性和值...

onkeydown="return false;"

这将禁用键入的输入，但仍允许使用日历控件输入。

于 2013-09-16T19:24:38.480 回答
15

使用如下控件-

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

它将禁用键盘输入。同样的方式也可以处理其他条件。

于 2014-09-10T08:57:32.870 回答
6

你可以通过两种方式做到这一点

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

    //make it readonly
   $(".k-datepicker input").prop("readonly", true);
于 2013-12-09T10:45:53.207 回答
6

找到您的输入元素，然后禁用它

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

（在剑道演示网站 http: //demos.kendoui.c​​om/web/datepicker/index.html 上试过）

于 2013-07-03T07:06:19.870 回答
4

如果您想阻止用户在日期选择器中输入日期并且只从弹出窗口中选择日期，请尝试此代码

$(".k-datepicker").find('span').find('input').attr("readonly", "readonly");
于 2013-07-03T07:17:29.967 回答
2

当然，日期和时间选择器小部件应该可以选择仅通过 UI 而不是通过键盘强制输入......否则它是真正的 DateTime“格式化”噩梦的秘诀！我很惊讶该框架没有为这个明显的用例提供任何东西。

我有同样的需求，并使用以下逻辑让它工作：

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

这样用户就不能通过键盘输入值，只能使用下拉日期选择窗口输入格式正确的日期。

于 2013-07-13T04:15:03.533 回答
0

对于 tagHelpers 只需使用以下

output.Attributes.Add("onkeydown", "javascript:return false;");
于 2020-07-20T01:23:11.483 回答
0

我已经使用onkeydown="return false;"在 HTML 级别解决了它

<input id="datePickerPastId" onkeydown="return false;" title="datepicker" style="width: 13%" class="mr-3" disabled />

所有浏览器都支持GlobalEventHandlers.onkeydown 。

在此处输入图像描述

于 2021-10-08T06:08:15.437 回答
0 
.HtmlAttributes(new { onkeydown="return false" })
于 2019-03-15T11:38:38.393 回答
0

实际上，小部件在输入输入时不会限制用户。此处解释了此行为的原因： Why widget does not restrict typing

与此线程中共享的所有其他解决方案一起，可以创建自定义 Masked DatePicker，它将用户限制为特定的日期格式。查看此操作演示以获取更多详细信息：

创建日期屏蔽

**请注意，Kendo UI 不支持将其作为内置功能，因此您需要自行承担使用它的风险。好消息是它的效果非常好，没有已知的副作用。

于 2016-06-24T08:04:35.370 回答
0

贾斯汀的回答有效，但它不会阻止鼠标右键单击粘贴不正确的值。您可以使用oncontextmenu防止鼠标右键单击

oncontextmenu="return false;"

这也可以防止日历中的数字被复制。

于 2019-06-06T10:55:52.923 回答