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>

<强>更新

您的文本框的ID是＆＃34; TimeSlot＆＃34;，但在您的脚本中，您引用的#datepicker甚至不存在。将脚本更改为：

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

顺便说一下，如果你不想使用剑道的Html助手，你就不会需要kendo.aspnetmvc.min.js，如果你使用的话，这不是我推荐的东西.net MVC。使用kendo.aspnetmvc.min.js，您甚至不需要脚本，您可以用以下内容替换文本框（输入标记）：

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

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

1 个答案: