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

Answer 2

您可以执行以下操作：

<ul class="list--inline pagination">
  {% unless paginate.previous.is_link %}
    <li aria-hidden="true">
      <button class="btn btn--tertiary btn--narrow" disabled>
        {% include 'icon-arrow-left' %}
        <span class="icon__fallback-text">{{ 'general.pagination.previous' | t }}</span>
      </button>
    </li>
    {% else %}
    <li>
      <a href="{{ paginate.previous.url }}" class="btn btn--tertiary btn--narrow">
        {% include 'icon-arrow-left' %}
        <span class="icon__fallback-text">{{ 'general.pagination.previous' | t }}</span>
      </a>
    </li>
  {% endunless %}
  <li class="pagination__text">
    {{ 'general.pagination.current_page' | t: current: paginate.current_page, total: paginate.pages }}
  </li>
  {% unless paginate.next.is_link %}
    <li aria-hidden="true">
      <button class="btn btn--tertiary btn--narrow" disabled>
        {% include 'icon-arrow-right' %}
        <span class="icon__fallback-text">{{ 'general.pagination.next' | t }}</span>
      </button>
    </li>
  {% else %}
    <li>
      <a href="{{ paginate.next.url }}" class="btn btn--tertiary btn--narrow">
        {% include 'icon-arrow-right' %}
        <span class="icon__fallback-text">{{ 'general.pagination.next' | t }}</span>
      </a>
    </li>
  {% endunless %}
</ul>

当某人单击日期选择器时，它返回false，因此在仍保持可选状态时不允许输入任何内容。

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

Answer 4

在maxlength中添加0 HtmlAttributes属性。

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

4 个答案: