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