asp.net-mvc - 使剑道日期选择器只读但也可选择

Question

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

Answer 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;
    }
});