easyui源码翻译1.32--Calendar(日历)

前言

　　前几天加班比较忙 未能及时更新翻译的 今天多发布几篇。。下载该插件翻译源码

     日历控件显示一个月的日历，允许用户选择日期和移动到下一个或上一个月。默认情况下，一周的第一天是周日。它可以通过设置'firstDay'属性的值来更改设置

源码

/**
 * jQuery EasyUI 1.3.2
 * 
 *翻译：qq 1364386878
 */
(function ($) {
    //调整日历大小
    function _resize(jq) {
        var opts = $.data(jq, "calendar").options;
        var t = $(jq);
        if (opts.fit == true) {
            var p = t.parent();
            opts.width = p.width();
            opts.height = p.height();
        }
        var header = t.find(".calendar-header");
        t._outerWidth(opts.width);
        t._outerHeight(opts.height);
        t.find(".calendar-body")._outerHeight(t.height() - header._outerHeight());
    };
    // 包裹日历
    function wrapCalendar(jq) {
        //wrapInner()方法使用指定的 HTML 内容或元素，来包裹每个被选元素中的所有内容 (inner HTML)。
        //详情参考http://www.w3school.com.cn/jquery/manipulation_wrapinner.asp
        $(jq).addClass("calendar").wrapInner("<div class=\"calendar-header\">"
            + "<div class=\"calendar-prevmonth\"></div>"
            + "<div class=\"calendar-nextmonth\"></div>"
            + "<div class=\"calendar-prevyear\"></div>"
            + "<div class=\"calendar-nextyear\"></div>"
            + "<div class=\"calendar-title\">"
            + "<span>Aprial 2010</span>"
            + "</div>"
            + "</div>"
            + "<div class=\"calendar-body\">"
            + "<div class=\"calendar-menu\">"
            + "<div class=\"calendar-menu-year-inner\">"
            + "<span class=\"calendar-menu-prev\"></span>"
            + "<span><input class=\"calendar-menu-year\" type=\"text\"></input></span>"
            + "<span class=\"calendar-menu-next\"></span>"
            + "</div>"
            + "<div class=\"calendar-menu-month-inner\">"
            + "</div>"
            + "</div>"
            + "</div>");
        //日历头部“年月”hover、click事件
        $(jq).find(".calendar-title span").hover(function () {
            $(this).addClass("calendar-menu-hover");
        }, function () {
            $(this).removeClass("calendar-menu-hover");
        }).click(function () {
            var menu = $(jq).find(".calendar-menu");
            if (menu.is(":visible")) {
                menu.hide();
            } else {
                showMenu(jq);//显示年份和月份选择的菜单
            }
        });
        //日历头部四个按钮hover、click事件
        $(".calendar-prevmonth,.calendar-nextmonth,.calendar-prevyear,.calendar-nextyear", jq).hover(function () {
            $(this).addClass("calendar-nav-hover");
        }, function () {
            $(this).removeClass("calendar-nav-hover");
        });
        $(jq).find(".calendar-nextmonth").click(function () {
            toMonth(jq, 1);//下月
        });
        $(jq).find(".calendar-prevmonth").click(function () {
            toMonth(jq, -1);//上月
        });
        $(jq).find(".calendar-nextyear").click(function () {
            toYear(jq, 1);//下年
        });
        $(jq).find(".calendar-prevyear").click(function () {
            toYear(jq, -1);//上年
        });
        $(jq).bind("_resize", function () {
            var options = $.data(jq, "calendar").options;
            if (options.fit == true) {
                _resize(jq);
            }
            return false;
        });
    };
    //上一月、下一月选择按钮处理方法 1：表示下月；-1：表示上月
    function toMonth(jq, tag) {
        var opts = $.data(jq, "calendar").options;
        opts.month += tag;
        if (opts.month > 12) {
            opts.year++;
            opts.month = 1;
        } else {
            if (opts.month < 1) {
                opts.year--;
                opts.month = 12;
            }
        }
        renderCalendar(jq);
        //日历头部月份更改
        var inner = $(jq).find(".calendar-menu-month-inner");
        inner.find("td.calendar-selected").removeClass("calendar-selected");
        inner.find("td:eq(" + (opts.month - 1) + ")").addClass("calendar-selected");
    };
    //上一年、下一年选择按钮处理方法   (1：表示下年；-1：表示上年)
    function toYear(jq, tag) {
        var options = $.data(jq, "calendar").options;
        options.year += tag;
        renderCalendar(jq);
        ////日历头部年份更改
        var year = $(jq).find(".calendar-menu-year");
        year.val(options.year);
    };
    //显示年份和月份选择的菜单
    function showMenu(jq) {
        var opts = $.data(jq, "calendar").options;
        $(jq).find(".calendar-menu").show();
        if ($(jq).find(".calendar-menu-month-inner").is(":empty")) {
            $(jq).find(".calendar-menu-month-inner").empty();
            ////表格布局月份选择菜单
            var t = $("<table></table>").appendTo($(jq).find(".calendar-menu-month-inner"));
            var idx = 0;
            for (var i = 0; i < 3; i++) {
                var tr = $("<tr></tr>").appendTo(t);
                for (var j = 0; j < 4; j++) {
                    $("<td class=\"calendar-menu-month\"></td>").html(opts.months[idx++]).attr("abbr", idx).appendTo(tr);
                }
            }
            $(jq).find(".calendar-menu-prev,.calendar-menu-next").hover(function () {
                $(this).addClass("calendar-menu-hover");
            }, function () {
                $(this).removeClass("calendar-menu-hover");
            });
            //下年按钮click事件
         
            $(jq).find(".calendar-menu-next").click(function () {
                var y = $(jq).find(".calendar-menu-year");
                if (!isNaN(y.val())) {
                    y.val(parseInt(y.val()) + 1);
                }
            });
            //上年按钮click事件
            $(jq).find(".calendar-menu-prev").click(function () {
                var y = $(jq).find(".calendar-menu-year");
                if (!isNaN(y.val())) {
                    y.val(parseInt(y.val() - 1));
                }
            });
            //菜单年份输入框keypress事件
            $(jq).find(".calendar-menu-year").keypress(function (e) {
                if (e.keyCode == 13) {
                    hideMenu();
                }
            });
            //菜单月份hover、click事件
            $(jq).find(".calendar-menu-month").hover(function () {
                $(this).addClass("calendar-menu-hover");
            }, function () {
                $(this).removeClass("calendar-menu-hover");
            }).click(function () {
                var menu = $(jq).find(".calendar-menu");
                menu.find(".calendar-selected").removeClass("calendar-selected");
                $(this).addClass("calendar-selected");
                hideMenu();
            });
        }
        //隐藏菜单
        function hideMenu() {
            var menu = $(jq).find(".calendar-menu");
            var year = menu.find(".calendar-menu-year").val();//获取菜单年份输入框值
            var _1b = menu.find(".calendar-selected").attr("abbr");//获取菜单选择的月份值
            if (!isNaN(year)) {
                opts.year = parseInt(year);
                opts.month = parseInt(_1b);
                renderCalendar(jq);
            }
            menu.hide();
        };


        var body = $(jq).find(".calendar-body");
        var menu = $(jq).find(".calendar-menu");
        var yearInner = menu.find(".calendar-menu-year-inner");
        var monthInner = menu.find(".calendar-menu-month-inner");
        yearInner.find("input").val(opts.year).focus();//默认年份输入框获得焦点
        monthInner.find("td.calendar-selected").removeClass("calendar-selected");
        monthInner.find("td:eq(" + (opts.month - 1) + ")").addClass("calendar-selected");
        menu._outerWidth(body._outerWidth());
        menu._outerHeight(body._outerHeight());
        monthInner._outerHeight(menu.height() - yearInner._outerHeight());
    };
    //根据年月获取日历所要显示的日期数组
    function getDateArray(jq, year, month) {
        var opts = $.data(jq, "calendar").options;
        var dateArray = [];
        var date = new Date(year, month, 0).getDate();
        for (var i = 1; i <= date; i++) {
            dateArray.push([year, month, i]);
        }
        //dates是存放星期六-星期天的日期的二维数组
        //result是存放dates的数组
        //result格式：[[[year,month,day],...,[]],...,[]]
        var result = [], dates = [];
        var _29 = -1;
        while (dateArray.length > 0) {
            //shift()方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
            var date = dateArray.shift();
            dates.push(date);
            var day = new Date(date[0], date[1] - 1, date[2]).getDay();
            if (_29 == day) {
                day = 0;
            } else {
                if (day == (opts.firstDay == 0 ? 7 : opts.firstDay) - 1) {
                    result.push(dates);
                    dates = [];
                }
            }
            _29 = day;
        }
        if (dates.length) {
            result.push(dates);
        }
        var firstWeek = result[0];//获取第一个星期
        //若不足7天，取前面日期补足
        if (firstWeek.length < 7) {
            while (firstWeek.length < 7) {
                var firstDate = firstWeek[0];
                var date = new Date(firstDate[0], firstDate[1] - 1, firstDate[2] - 1);
                firstWeek.unshift([date.getFullYear(), date.getMonth() + 1, date.getDate()]);
            }
        } else {
            var firstDate = firstWeek[0];
            var dates = [];
            for (var i = 1; i <= 7; i++) {
                var date = new Date(firstDate[0], firstDate[1] - 1, firstDate[2] - i);
                dates.unshift([date.getFullYear(), date.getMonth() + 1, date.getDate()]);
            }
            //unshift()方法可向数组的开头添加一个或更多元素，并返回新的长度。
            result.unshift(dates);
        }
        var lastWeek = result[result.length - 1];//获取最后一个星期
        //若不足7天，取后面日期补足
        while (lastWeek.length < 7) {
            var lastDate = lastWeek[lastWeek.length - 1];
            var date = new Date(lastDate[0], lastDate[1] - 1, lastDate[2] + 1);
            lastWeek.push([date.getFullYear(), date.getMonth() + 1, date.getDate()]);
        }
        if (result.length < 6) {
            var lastDate = lastWeek[lastWeek.length - 1];
            var dates = [];
            for (var i = 1; i <= 7; i++) {
                var date = new Date(lastDate[0], lastDate[1] - 1, lastDate[2] + i);
                dates.push([date.getFullYear(), date.getMonth() + 1, date.getDate()]);
            }
            result.push(dates);
        }
        return result;
    };
    // 渲染日历
    function renderCalendar(jq) {
        var opts = $.data(jq, "calendar").options;
        $(jq).find(".calendar-title span").html(opts.months[opts.month - 1] + " " + opts.year);//设置日历头部年月值
        var body = $(jq).find("div.calendar-body");
        body.find(">table").remove();//清空日历body
        //table布局日历body
        var t = $("<table cellspacing=\"0\" cellpadding=\"0\" border=\"0\"><thead></thead><tbody></tbody></table>").prependTo(body);
        var tr = $("<tr></tr>").appendTo(t.find("thead"));
       
        for (var i = opts.firstDay; i < opts.weeks.length; i++) {
            tr.append("<th>" + opts.weeks[i] + "</th>");
        }
        for (var i = 0; i < opts.firstDay; i++) {
            tr.append("<th>" + opts.weeks[i] + "</th>");
        }
        var _32 = getDateArray(jq, opts.year, opts.month);
        for (var i = 0; i < _32.length; i++) {
            var _33 = _32[i];
            var tr = $("<tr></tr>").appendTo(t.find("tbody"));
            for (var j = 0; j < _33.length; j++) {
                var day = _33[j];
                $("<td class=\"calendar-day calendar-other-month\"></td>").attr("abbr", day[0] + "," + day[1] + "," + day[2]).html(day[2]).appendTo(tr);
            }
        }
        t.find("td[abbr^=\"" + opts.year + "," + opts.month + "\"]").removeClass("calendar-other-month");
        var now = new Date();
        var _34 = now.getFullYear() + "," + (now.getMonth() + 1) + "," + now.getDate();
        t.find("td[abbr=\"" + _34 + "\"]").addClass("calendar-today");
        if (opts.current) {
            t.find(".calendar-selected").removeClass("calendar-selected");
            var _35 = opts.current.getFullYear() + "," + (opts.current.getMonth() + 1) + "," + opts.current.getDate();
            t.find("td[abbr=\"" + _35 + "\"]").addClass("calendar-selected");
        }
        var _36 = 6 - opts.firstDay;
        var _37 = _36 + 1;
        if (_36 >= 7) {
            _36 -= 7;
        }
        if (_37 >= 7) {
            _37 -= 7;
        }
        t.find("tr").find("td:eq(" + _36 + ")").addClass("calendar-saturday");
        t.find("tr").find("td:eq(" + _37 + ")").addClass("calendar-sunday");
        t.find("td").hover(function () {
            $(this).addClass("calendar-hover");
        }, function () {
            $(this).removeClass("calendar-hover");
        }).click(function () {
            t.find(".calendar-selected").removeClass("calendar-selected");
            $(this).addClass("calendar-selected");
            var _38 = $(this).attr("abbr").split(",");
            opts.current = new Date(_38[0], parseInt(_38[1]) - 1, _38[2]);
            opts.onSelect.call(jq, opts.current);
        });
    };
    //初始化日历
    $.fn.calendar = function (options, parm) {
        if (typeof options == "string") {
            return $.fn.calendar.methods[options](this, parm);
        }
        options = options || {};
        return this.each(function () {
            var calendar = $.data(this, "calendar");
            if (calendar) {
                $.extend(calendar.options, options);
            } else {
                calendar = $.data(this, "calendar",
                    { options: $.extend({}, $.fn.calendar.defaults, $.fn.calendar.parseOptions(this), options) });
                wrapCalendar(this);
            }
            if (calendar.options.border == false) {
                $(this).addClass("calendar-noborder");
            }
            _resize(this);
            renderCalendar(this);
            $(this).find("div.calendar-menu").hide();
        });
    };
    //日历默认方法
    $.fn.calendar.methods = {
        //返回参数对象。
        options: function (jq) {
            return $.data(jq[0], "calendar").options;
        },
        //调整日历大小
        resize: function (jq) {
            return jq.each(function () {
                _resize(this);
            });
        },
        //移动日历到指定日期
        moveTo: function (jq, date) {
            return jq.each(function () {
                $(this).calendar({ year: date.getFullYear(), month: date.getMonth() + 1, current: date });
            });
        }
    };
    //解析器配置
    $.fn.calendar.parseOptions = function (target) {
        var t = $(target);
        return $.extend({}, $.parser.parseOptions(target, ["width", "height", { firstDay: "number", fit: "boolean", border: "boolean" }]));
    };
    //日历默认 属性和事件
    $.fn.calendar.defaults = {
        //日历控件宽度
        width: 180,
        //日历控件高度
        height: 180,
        //当设置为true的时候，将设置日历控件大小自适应父容器
        fit: false,
        //定义是否显示边框
        border: true,
        //定义一周的第一天是星期几。0=星期日、1=星期一 等
        firstDay: 0,
        //显示的周列表内容
        weeks: ["S", "M", "T", "W", "T", "F", "S"],
        //显示的月列表内容
        months: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        //年日历。下面的例子显示了如何使用指定的年份和月份创建一个日历
        year: new Date().getFullYear(),
        //月日历。
        month: new Date().getMonth() + 1,
        //当前日期
        current: new Date(),
        //在用户选择一天的时候触发
        onSelect: function (_3e) {
        }
    };
})(jQuery);

 

示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic Calendar - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery-1.8.0.min.js"></script>
    <script src="../../plugins2/jquery.parser.js"></script>
    <script src="../../plugins2/jquery.calendar.js"></script>
</head>
<body>
    <h2>Basic Calendar</h2>
    <div class="demo-info" style="margin-bottom:10px">
        <div class="demo-tip icon-tip"></div>
        <div>Click to select date.</div>
    </div>
    
    <div class="easyui-calendar" style="width:180px;height:180px;"></div>

</body>
</html>

 

插件效果