C# kendo UI有使用过的没，给个简介

Posted 2023-03-23

简介一下Kendo UI控件，优点，缺点等，像百度百科那样，字数越多越好，请各位帮忙了

Kendo是日本语意：剑道；剑术。他们的logo就是一个武士形象，给人感觉真有本领，犀利。kendoui效果比jquery Mobile要好，次于Sencha Touch，但学习成本也次于它。下载地址：kendoui分三部分：
1.Kendo UI Web包含所有创建高速html5 web app的必备元素：UI组件、数据源、验证、一个MVVM框架、主题、模板等。(价格：$399) Kendo UI Web GPL版免费开源。
2.Kendo UI Mobile 创建的应用程序感觉就像本地应用程序。仅使用HTML5和javascript，通过一个简单的UI代码库便可支持大多数手机和平板电脑平台。(价格：$199)
3.Kendo UI DataViz 跨平台跨设备的数据可视化组件可以创建丰富的图表和仪表盘。(价格：$399)

Kendo UI拥有统一测试，支撑框架下你所需要的所有工具。它使得你专注于创建自己的应用程序，而不是从成百上千不支持的插件和库中创建（和支撑）框架。 Kendo UI Web包括简单、一致的编程接口，安全可靠的数据源，精美和新颖的UI小部件，MVVM框架，主题和模板等。你需要做的就是以Kendo UI Web为基础，去开发现代化、交互式的HTML5和JavaScript应用程序。

Kendo UI Web支持即时触屏功能。所有的Kendo UI Web小部件都全面支持触屏设备，如iPad、iPhone和android，因此你的Web应用程序能用在许多不同输入选项的设备上。甚至Kendo UI的拖拽框架都支持触摸屏，你无需仅仅为了处理鼠标和触摸屏输入而复制代码。想获取更地道的UI部件和移动设备上的体验，请搜索KendoUI Mobile。

Kendo UI的每个方面都从底层开始构建，以提供强大的JavaScript应用程序性能。Kendo UI不是另一个jQuery UI的克隆，它的每一个决定都是从优化性能出发。从轻量级的、执行明显快于jQurey模板的内置模板库，到利用CSS3硬件加速的（如果可能）优化动画 和先进的虚拟化用户界面，Kendo UI不遗余力地提供高性能的客户端UI。

kendo UI web确实是一个很优秀的框架，里面主要含有组件为以下几种：
常见组件列表：
AutoComplete 自动补齐
Calendar组件 日历表
ColorPicker 颜色选择器
ComboBox 下拉列表框
DatePicker 日期选择组件
DateTimePicker 日期时间控件
DropDownList 下拉菜单
Editor 在线编辑器
Grid 表格组件
ListView 列表视图
Menu 菜单
MultiSelect 多选框
NumericTextBox 数值文本框
PanelBar 手风琴选项卡
Scheduler 日程调度表
Slider 滑动控制器
Splitter 界面分割符
TabStrip 选项卡
TimePicker 时间选择器
Tooltip 提示工具
TreeView 树型视图
Window 弹窗

框架组件：
DataSource 数据源
Templates 模板
MVVM 视图模型
Effects 8种页面特效
Drag & Drop 拖放
Validator 表单验证
Globalization 全球化数据转换
Styling 样式 参考技术A 我帮你找到了，我给你个网址自己看吧，太多了 复制不过来 http://blog.csdn.net/column/details/mapdigitkendoui.html?&page=2本回答被提问者采纳

玩转Kendo UI：日期控件DatePicker

---恢复内容开始---

前言

因为工作原因，近来接触Kendo UI比较多，这期间利用它实现了一些功能，也遇到了一些坑，国内对于这个产品的介绍也不多，所以打算写一些文章，介绍一下Kendo UI，顺便记录下自己实现某些方案时遇到的问题及解决方案。

Kendo UI 简介

Kendo UI是Progress软件公司旗下的一款UI工具包产品，具有灵活性强、控件丰富、功能强大等特点。目前工具包有支持jQuery、Angular、React、Vue等版本。由博主工作上只接触了jQuery版本，所以写文章的时间，以jQuery版本为主。

工作的开始

引入jQuery、Kendo样式和js包

    <link rel="stylesheet" href="2018.2.620/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="2018.2.620/styles/kendo.material.min.css" />
    <link rel="stylesheet" href="2018.2.620/styles/kendo.material.mobile.min.css" />

    <script src="2018.2.620/js/jquery.min.js"></script>
    <script src="2018.2.620/js/kendo.all.min.js"></script>

这里默认的语言是英文，针对国内用户可以进行汉化，引入时，设置type="text/javascript" charset="utf-8"可避免汉字乱码的情况

    <!-- 引入汉化包 -->
    <script src="2018.2.620/js/cultures/kendo.culture.zh-CN.min.js" type="text/javascript" charset="utf-8"></script> 

到这里我们的前期工作就已经完成，接下是就是探索DatePicker控件的时候了。以下代码按默认配置初始化了一个日期控件。

        <div id="example">
            <div class="demo-section k-content">
                <h4>Kendo UI 日期控件:</h4>
                <input id="datepicker" value="" title="datepicker" style="width: 100%" />
            </div>
        <script>
            $(document).ready(function() {
                // 按默认配置初始化控件
                $("#datepicker").kendoDatePicker();
            });
        </script>

默认效果如下：

自定义配置

接下来，我们做一些配置使控件更符合我们的使用惯。加入汉化设置（前提是引入汉化包　　），设置最大日期、最小日期、启用显示周数、自定义时间格式

    // 简单的配置
    $("#datepicker").kendoDatePicker({
        culture: "zh-CN", //设置特定区域性的信息，默认使用"en-US"，如果进行汉化，引入汉化包后，设置为"zh-CN"
        format: "yyyy-MM-dd", //设定显示在input标签的日期格式
        max: new Date(2019, 11, 31), //设定最大日期，默认new Date(2099, 11, 31)
        min: new Date(2018,1,1), //设定最小日期，默认new Date(1900, 0, 1)
        weekNumber:true, //设定是否在日历左侧显示周数
    });

值得一提的时，上面代码是通过对控件的配置进行汉化的，仅对该控件有效，还有一种方式，可以全局开启汉化，对页面的所有控件都有效，如以下代码所示：

    // 简单的配置
    kendo.culture("zh-CN");
    $("#datepicker").kendoDatePicker({
        //culture: "zh-CN", //设置特定区域性的信息，默认使用"en-US"，如果进行汉化，引入汉化包后，设置为"zh-CN"
        format: "yyyy-MM-dd", //设定显示在input标签的日期格式
        max: new Date(2019, 11, 31), //设定最大日期，默认new Date(2099, 11, 31)
        min: new Date(2018,1,1), //设定最小日期，默认new Date(1900, 0, 1)
        weekNumber:true, //设定是否在日历左侧显示周数
    });

 

可以看到符合我们使用习惯的效果：

 

 

Kendo日期控件的全局配置说明如下所示：

    // 全配置说明
    $("#datepicker").kendoDatePicker({
        animation:{
            close:{
                effects:"zoom:out",   // 关闭特效，特效格式为"特效形式:方向"，如何有多个特效叠加，特效之间用空格分隔，本例彩缩放特效的缩小方向。
                duration:1000,        //特效时长
            },
            open:{
                effects:"zoom:in",  //打开特效
                duration:1000,
            }
        },
        ARIATemplate: "日期: #=kendo.toString(data.current, ‘D‘)#", // 设置显示日期值的aria-label属性，默认为"Current focused date is #=kendo.toString(data.current, ‘D‘)#"
        culture: "zh-CN", //设置特定区域性的信息，默认使用"en-US"，如果进行汉化，引入汉化包后，设置为"zh-CN"
        dateInput: true, //设置编辑日期时是否使用DateInput控件。DateInput为一个日期校验控件
        dates:[
            new Date(2018, 9, 10),
            new Date(2018, 9, 30)
        ],                //日期数据，可以传到month template
        depth:"year", //设定导航的深度，值为"month"、"year"、"decade"、"century"。设置为"month"时，展示当前月的所有天，为"year",展示当前年的所有月份，其余以此类推。当start设定比depth低时无效，必段同时设定start和depth
        disableDates: [‘su‘], //禁止选择的日期数组.具体元素可以是具体日期，也可以是"mo","tu","we","th","fr","sa","su"。此配置可以使用函数。
        footer: "", //日历底部的模版，如果为false，则不进行渲染。
            format: "MMMM yyyy", //设定显示在input标签的日期格式
        max: new Date(2188, 11, 31), //设定最大日期，默认new Date(2099, 11, 31)
        min: new Date(), //设定最小日期，默认new Date(1900, 0, 1)
        month:{
            content:"", //日历在最大日期最小日期【之间】的“天”单元格的模版，最大日期参见max配置，最小日期参见min配置
            weekNumber:"",//日历在最大日期最小日期之间的“周”单元格的模版，需要开启显示周
            empty:"", //日历在最大日期最小日期【之外】的“天”单元格的模版
        },
        weekNumber:true, //设定是否在日历左侧显示周数
        parseFormats: ["MM yyyy"], //设定允许直接在input标签输入的时间格式列表，包括format
        start:"decade", //设定开始视图，值参考depth
        value: new Date(2011, 0, 1), //设定已选定日期
    });

 

附录

 时间自定义格式说明，比较简单的英文，不作翻译了。

Specifier	Result
"d"	Renders the day of the month, from 1 through 31.
"dd"	The day of the month, from 01 through 31.
"ddd"	The abbreviated name of the day of the week.
"dddd"	The full name of the day of the week.
"f"	The tenths of a second in a date and time value.
"ff"	The hundredths of a second in a date and time value.
"fff"	The milliseconds in a date and time value.
"M"	The month, from 1 through 12.
"MM"	The month, from 01 through 12.
"MMM"	The abbreviated name of the month.
"MMMM"	The full name of the month.
"h"	The hour, using a 12-hour clock from 1 to 12.
"hh"	The hour, using a 12-hour clock from 01 to 12.
"H"	The hour, using a 24-hour clock from 1 to 23.
"HH"	The hour, using a 24-hour clock from 01 to 23.
"m"	The minute, from 0 through 59.
"mm"	The minute, from 00 through 59.
"s"	The second, from 0 through 59.
"ss"	The second, from 00 through 59.
"tt"	The AM/PM designator.
"yy"	The last two characters from the year value.
"yyyy"	The year full value.
"zzz"	The local timezone when using formats to parse UTC date strings.