Kendo UI 设置日期选择器时出错

Question

我正在尝试获取 Kendo Ui（免费版本有效）。我正在尝试使用以下代码实现日期选择器，但我得到的只是一个空输入字段。有人对如何解决这个问题有什么建议吗？

<!DOCTYPE html>
<html>
  <head>
    <link href="/Content/kendo/2015.3.1111/kendo.common.min.css" rel="stylesheet" />
    <link href="/Content/kendo/2015.3.1111/kendo.default.min.css" rel="stylesheet" />
  </head>
<body>
  <script src="/Scripts/jquery-1.10.2.js"></script>
  <script src="/Scripts/kendo/2015.3.1111/kendo.core.min.js"></script>
  <script src="/Scripts/kendo/2015.3.1111/kendo.calendar.min.js"></script>
  <script src="/Scripts/kendo/2015.3.1111/kendo.popup.min.js"></script>
  <script src="/Scripts/kendo/2015.3.1111/kendo.datepicker.min.js"></script>
  <script src="/Scripts/kendo/2015.3.1111/kendo.data.min.js"></script>
  <script src="/Scripts/kendo/2015.3.1111/kendo.list.min.js"></script>
  <script src="/Scripts/kendo/2015.3.1111/kendo.combobox.min.js"></script>
  <script src="/Scripts/kendo/2015.3.1111/kendo.dropdownlist.min.js></script>
  <script src="/Scripts/kendo/2015.3.1111/kendo.multiselect.min.js"></script>
  <script src="/Scripts/kendo/2015.3.1111/kendo.validator.min.js"></script>
  <input id="TimeSlot" name="TimeSlot" type="datetime" />

   <script type="text/javascript">
    $(document).ready(function () {
        debugger;
        $("#TimeSlot").kendoDatePicker();
        //var datepicker = $("#datepicker").data("kendoDatePicker");
    });
    </script>
  </body>
</html>

Answer 1

您需要引用所有这些 javascript 文件才能使 DatePicker 正常工作。您可以使用 Kendo UI Custom Download tool 找出您需要参考的 javascript 文件并下载包含您需要的所有内容的自定义 javascript 文件：

<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.core.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.calendar.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.popup.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.datepicker.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.data.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.list.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.combobox.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.dropdownlist.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.multiselect.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.validator.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.aspnetmvc.min.js"></script>

更新：

您的 text-box 的 ID 是 "TimeSlot"，但在您的脚本中您指的 #datepicker 甚至不存在。将您的脚本更改为：

<script type="text/javascript">
    $(document).ready(function () {
        $("#TimeSlot").kendoDatePicker();
        //var datepicker = $("#TimeSlot").data("kendoDatePicker");
    });
</script>

顺便说一句，如果您不想使用 Kendo 的 Html 助手，则不需要 kendo.aspnetmvc.min.js，如果您正在使用 asp.net MVC。使用 kendo.aspnetmvc.min.js，您甚至不需要脚本，只需将 text-box（输入标签）替换为：

@(Html.Kendo().DatePicker().Name("TimeSlot"))

Kendo UI 设置日期选择器时出错

Kendo UI error when setting up Date Picker

kendo-ui

kendo-asp.net-mvc