使Kendo Datepicker只读,但也可以选择

Question

我一直在努力使我的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>

Answer 1

过了一会儿,我发现了一个使用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;
    }
});