玩转Kendo UI：日期控件DatePicker（一）

    <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>

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

        <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, //设定是否在日历左侧显示周数
    });

    // 全配置说明
    $("#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), //设定已选定日期
    });