使 Kendo Datepicker 只读但也可选择

Posted 2023-05-07

【中文标题】使 Kendo Datepicker 只读但也可选择

【英文标题】：Making Kendo Datepicker readonly but also selectable

【发布时间】：2013-08-21 15:07:37

【问题描述】：

我一直在努力在没有用户文本输入的情况下制作我的 Kendo Datepicker，而我想出的唯一解决方案是将标签设置为“只读”。但是我希望能够用鼠标从选择器中选择日期，而不能直接向选择器输入文本，因此使日期选择器只读但可选择。

有什么想法吗？

                <div>
                    @(html.Kendo().DatePicker()
                          .Start(CalendarView.Year)
                          .Name("DatePicker")
                          .Value(DateTime.Now.AddDays(-365))
                          .Max(DateTime.Now)
                          .HtmlAttributes(new  style = "width: 125px;"  )
                          .Events(e => e.Change("onDateChange")))
                </div>

【参考方案1】：

过了一会儿，我发现了一个使用 javascript 的非常简单的解决方案。我只是声明了一个脚本，它可以防止任何用户输入，而不会禁用或将输入设为只读。像这样的：

$("#inputId").keypress(function (evt) 
    var keycode = evt.charCode || evt.keyCode;
    if (keycode == 9)  //allow Tab through
        return true;
     else 
        return false;
    
);

这比我想象的要容易:)

###########已编辑####################

正如评论中所建议的那样，抑制所有击键可能不是一个好习惯，因此我将粘贴几乎相同的代码，但建议我打开 datePicker（但仍然会抑制用户文本输入）。

$("#inputId").keypress(function (evt) 
    var keycode = evt.charCode || evt.keyCode;
    if (keycode == 9)  //allow Tab through
        return true;
     else 
        // Allow the datepicker to open instead
        var datePicker = $("#inputId").data("kendoDatePicker");
        datePicker.open();
        return false;
    
);

【讨论】：

有趣的是，剑道没有涵盖这一点。一个细节，这个解决方案可能会让用户感到困惑，例如。当您选择一个字段时，您应该被允许在其中输入。当用户尝试输入时，打开数据选择器而不是吞下按键怎么样？

感谢您的意见@Bobby_D_。我还发现他们没有涵盖这一点很奇怪，至少我浏览了他们的所有文档并且没有关于抑制击键的内容。我认为您在建议不要抑制击键而是打开日期选择器时可能会有所作为。我已经更新了我的答案以反映这一点。谢谢你:)

但是如何防止通过浏览器右键菜单复制粘贴呢？

检查这个@MylesJ：***.com/questions/5618109/…

【参考方案2】：

你可以这样做：

@(Html.Kendo().DatePicker().Name("FollowUpDate").HtmlAttributes(newonkeydown="javascript:return false;" ))

当有人点击日期选择器时，它返回 false，因此在它仍然可选择时不允许输入任何内容。

【讨论】：

考虑在代码中添加解释以使其更清晰。

这基本上做同样的事情，只是噪音更小:)

【参考方案3】：

如果您只想从 kendoDatePicker 显示的打开日历中选择数据，但用户不允许输入日期

<link href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.default.min.css" rel="stylesheet" />

<input type="text" onkeydown="return false" placeholder="Enter Date"  class="DatePicherKendo" />


<script src="~/bower_components/DataPicker-Kendo/JalaliDate.js"></script>
<script src="~/bower_components/DataPicker-Kendo/kendo.web.js"></script>

   $(".DatePicherKendo").kendoDatePicker();

【参考方案4】：

在HtmlAttributes 中添加0 的maxlength 属性。