7

我一直在努力制作没有用户文本输入的 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>
4

4 回答 4

8

过了一会儿，我找到了一个使用 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;
    }
});
于 2013-08-19T21:06:02.903 回答
2

你可以这样做：

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

当有人单击日期选择器时，它会返回 false，因此在它仍然可以选择的情况下不允许输入任何内容。

于 2019-08-26T11:43:29.150 回答
0

如果您只想从 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();
于 2020-09-02T10:53:00.607 回答
-2

添加in的maxlength属性。0HtmlAttributes

于 2015-01-16T20:33:08.947 回答