zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    申论1
    why factory pattern and when to use factory pattern
    jvm的字符串池
    is assembler instruction and machine instuction atomic
    jvm本身的多线程机制
    final
    java类的加载
    path和classpath的用途
    jar -cmf file1 file2 file3命令
    MANIFEST.MF中的MF是什么意思
  • 原文地址:https://www.cnblogs.com/zhonghan/p/3372085.html
Copyright © 2011-2022 走看看