博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

Kendo 日期控件

Posted on 2013-10-16 13:41  钟悍  阅读(2981)  评论(0)  编辑  收藏  举报 
<!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>