玩转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.