设置日期选择器时出现 Kendo UI 错误答案

【问题标题】：Kendo UI error when setting up Date Picker设置日期选择器时出现 Kendo UI 错误
【发布时间】：2016-01-11 13:46:35
【问题描述】：

我正在尝试让 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>

【问题讨论】：

标签： kendo-ui kendo-asp.net-mvc

【解决方案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>

更新：

您的文本框的 id 是“TimeSlot”，但在您的脚本中，您指的是 #datepicker，它甚至不存在。将您的脚本更改为：

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

顺便说一句，如果您不想使用 Kendo 的 Html Helpers，则不需要 kendo.aspnetmvc.min.js，如果您使用的是 asp.net MVC，我不建议您这样做。使用kendo.aspnetmvc.min.js，您甚至不需要脚本，您只需将您的文本框（输入标签）替换为：

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

【讨论】：

这已解决来自控制台的错误消息。怎么什么都没有发生。日期选择器字段附近不显示日历图标。任何想法为什么？
请更新您的问题，提供更多信息，例如您在页面上看到的屏幕截图。
有关更多详细信息，请参阅有关在原始问题中不起作用的 test.html 页面的编辑。
你的 DatePicker 在哪里？您的页面上只有一些脚本。另外，您仍然缺少kendo.aspnetmvc.min.js。
我看不到 Kendo.aspnetmvc.min.js 文件。它是 Kendo UI Core 的一部分吗？