asp.net-mvc – 使Kendo Datepicker只读,但也可以选择

发布时间：2020-12-16 07:00:52 所属栏目：asp.Net 来源：网络整理

导读：我一直在努力使我的Kendo Datepicker没有用户文本输入,我提出的唯一解决方案就是将标签设为“readonly”.但是我希望能够使用鼠标从选择器中选择日期,而无法直接将文本输入到选择器,因此使得日期选择器只能读取但可选择. 有什么想法？ div @(Html.Kendo().Dat

我一直在努力使我的Kendo Datepicker没有用户文本输入,我提出的唯一解决方案就是将标签设为“readonly”.但是我希望能够使用鼠标从选择器中选择日期,而无法直接将文本输入到选择器,因此使得日期选择器只能读取但可选择.

有什么想法？

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

解决方法

过了一会儿,我发现了一个使用javascript的简单解决方案.我只是声明了一个脚本,它可以阻止任何用户输入,而不会禁用或只读输入.像这样的东西：

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

这比我想象的容易:)

########### EDITED ####################

正如评论中所建议的那样,抑制所有击键可能不是好习惯所以我会粘贴几乎相同的代码,但建议我打开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;
    }
});

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!