js实现周历插件方法

1.兼容IE8-11、360浏览器、chrome、firefox等主流浏览器；手机端也可使用。

2.添加点击前一周、后一周和高亮等功能。

实现原理概述

1.初始化周历原理：

首先获取表示当前星期几的数字，一般是0（周日）-6（周六）currDay = d.getDay()；

然后把值取负数传到方法creatWeeklyCalendar进行循环显示一周时间；

for (var i = some, len = some + 7; i < len; i++) {

                if (this.calcTime(i).month == currMonth && this.calcTime(i).date == currDate) {

                    html += '<li class="active"><a href="javascript:;" data-year="' + this.calcTime(i).year + '" title="' + this.calcTime(i).month + '月">' + this.calcTime(i).date + '</a></li>';

                } else {

                    html += '<li><a href="javascript:;" data-year="' + this.calcTime(i).year + '" title="' + this.calcTime(i).month + '月">' + this.calcTime(i).date + '</a></li>';

                }

            }

备注：方法calcTime是利用当前毫秒数+-循环数的毫秒数（someTime = d.getTime() + (24 * 60 * 60 * 1000) * num）算出这天的年月日。

最后把html输出到页面。

 

2.前一周和后一周原理：

首先利用点击前一周和后一周按钮，对计算数clickedTimes进行+-；

然后把clickedTimes新值传到方法changeWeek；

最后执行this.creatWeeklyCalendar(-currDay - (7 * clickedTimes))，重新输出新一周的数据。

3.最后把构造函数暴露window.WeeklyCalendar = WeeklyCalendar。

全部代码：

(function() {

    /*简化id操作*/

    var $$ = function(id) {

        return document.getElementById(id);

    };

    var d = new Date();

    var currDay = d.getDay(),

        currDate = d.getDate(),

        currMonth = d.getMonth() + 1,

        currYear = d.getFullYear(),

        clickedTimes = 0; //用于计算每周显示数据

    var WeeklyCalendar = function() {

        var _this_ = this;

        /*周历使用*/

        this.initweeklyCalendar();

        EventUtil.addHandler($$('ui-datepicker-wrapper'), 'click', function(e) {

            var event = EventUtil.getEvent(e);

            var target = EventUtil.getTarget(event);

            if (target.id == 'prev_week') {

                /*前一周*/

                clickedTimes++;

                _this_.changeWeek(clickedTimes);

 

            } else if (target.id == 'next_week') {

                /*后一周*/

                clickedTimes--;

                _this_.changeWeek(clickedTimes);

            } else if (target.tagName.toLowerCase() == 'a') {

                var lis = $$('weeklyCanlendarView').getElementsByTagName('li');

                for (var i = 0, len = lis.length; i < len; i++) {

                    if (lis[i].className.indexOf('active') == -1) {

                        lis[i].className = '';

                    }

                }

                target.parentNode.className = "clickActive";

                // 获取点击日期的年月日

                // var _y = target.getAttribute('data-year'),

                //     _m = parseInt(target.title) < 10 ? "0" + parseInt(target.title) : parseInt(target.title),

                //     _d = target.innerHTML < 10 ? "0" + target.innerHTML : target.innerHTML,

                //     dateTime;

                // dateTime = {

                //     "year": _y,

                //     "month": _m,

                //     "date": _d

                // };

                // console.log(dateTime);

            }

        }, false);

    };

    WeeklyCalendar.prototype = {

        /**

          * 计算过去或者是未来时间

          @param obj 返回的月份和日期  

          @param {number} num 计算过去或者是未来的某天

        */

        calcTime: function(num) {

            num = num || 0;

            var someTime = d.getTime() + (24 * 60 * 60 * 1000) * num,

                someYear = new Date(someTime).getFullYear(),

                someMonth = new Date(someTime).getMonth() + 1, //未来月

                someDate = new Date(someTime).getDate(); //未来天

            var obj = {

                "year": someYear,

                "month": someMonth,

                "date": someDate

            };

            return obj;

        },

        /*创建周历*/

        creatWeeklyCalendar: function(some) {

            if (currMonth < 10) currMonth = '0' + currMonth;

            var html = '<div class="datetime_header">' +

                '<a href="javascript:;" title="上一周" class="prev_icon" id="prev_week"></a>' +

                '<span><b id="year_selector">' + currYear + '</b>年<b id="month_selector">' + currMonth + '</b>月</span>' +

                '<a href="javascript:;" title="下一周" class="next_icon" id="next_week"></a>' +

                '</div>' +

                '<ul id="weeks_ch">' +

                '<li>日</li>' +

                '<li>一</li>' +

                '<li>二</li>' +

                '<li>三</li>' +

                '<li>四</li>' +

                '<li>五</li>' +

                '<li>六</li>' +

                '</ul>' +

                '<ul id="weeklyCanlendarView" clickedTimes="0">';

            for (var i = some, len = some + 7; i < len; i++) {

                if (this.calcTime(i).month == currMonth && this.calcTime(i).date == currDate) {

                    html += '<li class="active"><a href="javascript:;" data-year="' + this.calcTime(i).year + '" title="' + this.calcTime(i).month + '月">' + this.calcTime(i).date + '</a></li>';

                } else {

                    html += '<li><a href="javascript:;" data-year="' + this.calcTime(i).year + '" title="' + this.calcTime(i).month + '月">' + this.calcTime(i).date + '</a></li>';

                }

            }

            html += '</ul>';

            $$('ui-datepicker-wrapper').innerHTML = html;

        },

        // 初始化周历

        initweeklyCalendar: function() {

            this.creatWeeklyCalendar(-currDay);

        },

        /*前一周和后一周方法*/

        changeWeek: function(clickedTimes) {

            this.creatWeeklyCalendar(-currDay - (7 * clickedTimes));

            var aTags = $$('weeklyCanlendarView').getElementsByTagName('a');

            $$('weeklyCanlendarView').setAttribute('clickedTimes', clickedTimes);

            //动态设置月

            var clickMonth = parseInt(aTags[0].title);

            if (clickMonth < 10) clickMonth = '0' + clickMonth;

            $$('month_selector').innerHTML = clickMonth;

            //动态设置年

            var clickYear = aTags[0].getAttribute('data-year');

            $$('year_selector').innerHTML = clickYear;

        }

    };

    window.WeeklyCalendar = WeeklyCalendar;

})();