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