Kendo 日期控件

<!DOCTYPE html>
<html>
<head>
    <title></title>
        <link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css" rel="stylesheet" />
         <link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.default.min.css" rel="stylesheet" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
</head>
<body>
    
        <div id="example" class="k-content">
            <div class="configuration">
                <span class="infoHead">Information</span>
                <p>
                    Apply special style for the birthdays.
                </p>
            </div>

            <table class="demo-section">
        <tr>
        <td>
                 <input id="datetimepickerBegin" />
        </td>
        <td>
            <input id="datetimepickerEnd" />
        </td>
        </tr>
            </table>


            <script>
                function isInArray(date, dates) {
                    for(var idx = 0, length = dates.length; idx < length; idx++) {
                        var d = dates[idx];
                        if (date.getFullYear() == d.getFullYear() &&
                            date.getMonth() == d.getMonth() &&
                            date.getDate() == d.getDate()) {
                            return true;
                        }
                    }

                    return false;
                }

                $(document).ready(function() {
                    var today = new Date(),
                        birthdays = [
                           new Date(today.getFullYear(), today.getMonth(), 11, 10, 0, 0),
                           new Date(today.getFullYear(), today.getMonth(), 11, 10, 30, 0),
                           new Date(today.getFullYear(), today.getMonth(), 11, 14, 0, 0),
                           new Date(today.getFullYear(), today.getMonth() + 1, 6, 20, 0, 0),
                           new Date(today.getFullYear(), today.getMonth() + 1, 27, 8, 0, 0),
                           new Date(today.getFullYear(), today.getMonth() + 1, 27, 18, 0, 0),
                           new Date(today.getFullYear(), today.getMonth() - 1, 3, 12, 0, 0),
                           new Date(today.getFullYear(), today.getMonth() - 2, 22, 16, 30, 0)
                        ];

                    $("#datetimepickerBegin").kendoDateTimePicker({
            format: "yyyy-MM-dd hh:mm:ss",
                        parseFormats: ["yyyy-MM-dd", "hh:mm:ss"],
                        value: today,
                        dates: birthdays,
                        month: {
                            // template for dates in month view
                            content: '# if (isInArray(data.date, data.dates)) { #' +
                                         '<div class="birthday"></div>' +
                                     '# } #' +
                                     '#= data.value #'
                        },
                        footer: "Today - #=kendo.toString(data, 'd') #"
                    });

                    $("#datetimepickerBegin").data("kendoDateTimePicker")
                                    .dateView.calendar.element
                                    .width(300);



                   $("#datetimepickerEnd").kendoDateTimePicker({
            format: "yyyy-MM-dd hh:mm:ss",
                        parseFormats: ["yyyy-MM-dd", "hh:mm:ss"],
                        value: today,
                        dates: birthdays,
                        month: {
                            // template for dates in month view
                            content: '# if (isInArray(data.date, data.dates)) { #' +
                                         '<div class="birthday"></div>' +
                                     '# } #' +
                                     '#= data.value #'
                        },
                        footer: "Today - #=kendo.toString(data, 'd') #"
                    });

                    $("#datetimepickerEnd").data("kendoDateTimePicker")
                                    .dateView.calendar.element
                                    .width(300);

                });
            </script>

            <style scoped>
                .demo-section {
                    margin-right: 375px;
                    width: 185px;
                }

                .birthday {
                    background: transparent url(../../content/web/calendar/cake.png) no-repeat 0 50%;
                    display: inline-block;
                    width: 16px;
                    height: 16px;
                    vertical-align: middle;
                    margin-right: 3px;
                }
            </style>
        </div>


</body>
</html>
相关阅读:
TDSSNIClient initialization failed with error 0x7e, status code 0x60.
SourceSafe Outof Memory
机器学习（Part I）机器学习的种类
 机器学习PartIII：测试算法和NFL定理
 Google架构学习
 MediaWiki安装问题总结
 [转]IT项目管理实务
 几本关于统计学习的书
 Googlebot开始检索网站深层内容
 中文搜索引擎技术之网页排序
原文地址：https://www.cnblogs.com/zhonghan/p/3372085.html