Kendo UI目前最新提供KendoUI for jQuery、KendoUI for Angular、KendoUI Support for React和KendoUI Support for Vue四个控件。Kendo UI for jQuery是创建现代Web应用程序的完整UI库。
欢迎大家阅读Kendo UI for jQuery入门的第一步指南教程！本指南创建一个用例场景，演示如何开始使用该套件并在项目中为jQuery实现Kendo UI DatePicker小部件。
1. 在本地添加所需的CSS和JavaScript文件。
您还可以使用Kendo UI CDN服务。
https://kendo.cdn.telerik.com/VERSION/js/FILENAME.min.js和https://kendo.cdn.telerik.com/VERSION/styles/FILENAME.min.csslocations提供了CSS和JavaScript文件的缩小CDN版本。
在HTML文档的head标记中包含Kendo UI CSS和CSS JavaScript。
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Kendo UI!</title>
<!– Common (base) Kendo UI stylesheet. Register it before the Kendo UItheme-specific stylesheet. –>
<link href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common.min.css"rel="stylesheet" />
<!– Default Kendo UI theme stylesheet. –>
<linkhref="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.default.min.css"rel="stylesheet" />
<!– (Optional) Kendo UI Hybrid stylesheet. Include only if you will usethe mobile devices features. –>
<linkhref="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.default.mobile.min.css"rel="stylesheet" />
<!– jQuery JavaScript. Register it before the Kendo UI JavaScript file.–>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<!– Kendo UI combined JavaScript –>
<scriptsrc="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>
</head>
<body>
Hello World!
</body>
</html>
2. 为Kendo UI DatePicker小部件添加HTML元素。
3. 使用其jQuery插件初始化DatePicker。
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Kendo UI!</title>
<linkhref="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common.min.css"rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.default.min.css"rel="stylesheet" />
<linkhref="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.default.mobile.min.css"rel="stylesheet" />
<scriptsrc="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>
</head>
<body>
<!– HTML element from which the DatePicker would be initialized –>
<input id="datepicker" />
<script>
// Initialize the Kendo UI DatePicker by calling the kendoDatePicker jQueryplugin.
$(function() {
$("#datepicker").kendoDatePicker();
});
</script>
</body>
</html>
4. 设置DatePicker的de-DE文化区域设置。
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Kendo UI!</title>
<linkhref="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common.min.css"rel="stylesheet" />
<linkhref="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.default.min.css"rel="stylesheet" />
<linkhref="https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.default.mobile.min.css"rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<scriptsrc="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>
<!– Register the culture js file –>
<scriptsrc="https://kendo.cdn.telerik.com/2019.2.619/js/cultures/kendo.culture.de-DE.min.js"></script>
</head>
<body>
<input id="datepicker" />
<script>
// Configure the DatePicker to use German culture.
$(function() {
$("#datepicker").kendoDatePicker({
culture: "de-DE"
});
// Get a reference to the DatePicker andset its value.
var datepicker = $("#datepicker").data("kendoDatePicker");
datepicker.value(new Date(2016, 10, 1));
});
</script>
</body>
</html>
京ICP备09015132号-996 | 网络文化经营许可证京网文[2017]4225-497号 | 违法和不良信息举报电话：4006561155
© Copyright 2000-2023 北京哲想软件有限公司版权所有 | 地址:北京市海淀区西三环北路50号豪柏大厦C2座11层1105室
![网络文化经营许可证京网文[2017]4225-497号](/f/image/20180509/20180509164113_9707.jpg){kind=link}