JCalendar 日历控件

/***************************
 *JCalendar日历控件
 *@author xx
 *@date 2010-1-30
 ***************************/

/*
 *@param year 年份
 *@param month 月份

 *@param date 日期

*@id 控件触发显示日历的id

 */
 /*如果参数不足三个那么就初始化为当天日期*/
function JCalendar (id,year,month,date) {
    var _date = arguments.length == 1 ? new Date() : new Date(year,month-1,date);

    //实例变量
//    this.id=id;
    this.year = _date.getFullYear();
    this.month = _date.getMonth() + 1;
    this.fday = new Date(this.year,this.month-1,1).getDay();//每月第一天的前一天星期数
    this.dayNum = new Date(this.year,this.month,0).getDate();//每月的天数
    //成员变量，当前年月日
    JCalendar.cur_year = this.year;
    JCalendar.cur_month = this.month;
    JCalendar.cur_date = _date.getDate();
    JCalendar._id=id;
}
JCalendar.prototype.show = function(){
    
    var date = new Array(this.fday > 0 ? this.day : 0);//预先定义一段空数组，对应日历里第一周空的位置
    var html_str = new Array();
    var date_index = 0;
    var weekDay = ["日","一","二","三","四","五","六"];
    for(var j = 1; j <= this.dayNum; j++){//初始化date数组
        date.push(j);
    }
    html_str.push("<table id='calendar'>");
    html_str.push("<caption><span title='上一年份' onmouseover=\"this.style.color='#F90'\" onmouseout=\"this.style.color='#09F'\" onclick=\"JCalendar.update(-12);return false\" style='color:#09F;font-size:16px;margin-right:5px;'>&laquo;</span><span title='上一月份'  onmouseover=\"this.style.color='#F90'\" onmouseout=\"this.style.color='#09F'\" onclick=\"JCalendar.update(-1);return false\" style='margin-right:15px;color:#09F;'>▲</span><span id='calendar_title'>" + this.year + "年" + this.month + "月</span><span title='下一月份' onclick=\"JCalendar.update(1);return false\"  onmouseover=\"this.style.color='#F90'\" onmouseout=\"this.style.color='#09F'\" style='margin-left:15px;color:#09F;'>▼</span><span title='下一年份' onclick=\"JCalendar.update(12);return false\"  onmouseover=\"this.style.color='#F90'\" onmouseout=\"this.style.color='#09F'\" style='font-size:16px;margin-left:5px;color:#09F;'>&raquo;</span></caption>");
    html_str.push("<thead><tr>");
    for(var i = 0; i < 7; i++){//填充日历头
        html_str.push("<td>" + weekDay[i] + "</td>");
    }
    html_str.push("</tr></thead>");
    html_str.push("<tbody>");
    for(var i = 0; i < 6; i++){//填充日期
        html_str.push("<tr>");
        for(var j = 0; j < 7; j++){
            tmp = date[date_index++];
            tmp = tmp ? tmp : "";
            if(JCalendar.cur_date == tmp)
                html_str.push("<td><span id='c_today' style='background-color:#036;color:#FFF;'>" + JCalendar.cur_date + "</span></td>");
            else if(tmp == "")
                html_str.push("<td></td>");
            else
                html_str.push("<td><div onmouseover=\"this.style.backgroundColor='#CCC'\" onmouseout=\"this.style.backgroundColor=''\" onclick='JCalendar.click(this)'>" + tmp + "</div></td>");
        }
        html_str.push("</tr>");
    }
    html_str.push("</tbody></table>");
    return html_str.join("");
}
//静态方法
JCalendar.update = function(_month){
    var date = new Date(JCalendar.cur_year,JCalendar.cur_month - 1 + _month,1);
    var fday = date.getDay();//每月第一天的星期数
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var dayNum = new Date(JCalendar.cur_year,JCalendar.cur_month  + _month,0).getDate();//每月的天数
    var tds = document.getElementById("calendar").getElementsByTagName("td");
    for(var i = 7; i < tds.length; i++)//清空日历内容
    tds[i].innerHTML = "";
    document.getElementById("calendar_title").innerHTML = year + "年" + month + "月";//更新显示年月
    //更新当前年月
    JCalendar.cur_year = year;
    JCalendar.cur_month = month;
    for(var j = 1; j <= dayNum; j++){
        if(j == JCalendar.cur_date)
            tds[6 + fday + j].innerHTML = "<span id='c_today' style='background-color:#036;color:#FFF;'>" + JCalendar.cur_date + "</span>";
        else
            tds[6 + fday + j].innerHTML = "<div onmouseover=\"this.style.backgroundColor='#CCC'\" onmouseout=\"this.style.backgroundColor=''\" onclick='JCalendar.click(this)'>" + j + "</div>";
    }
    JCalendar.onupdate(year,month,JCalendar.cur_date);
}

JCalendar.onupdate = function(year,month,date){//日历更改时执行的函数，可以更改为自己需要函数,控件传递过来的参数为当前日期
    //alert(year + "年" + month + "月" + date + "日");
}

JCalendar.click = function(obj){
    
    var tmp = document.getElementById("c_today");
    tmp.parentNode.innerHTML = "<div onmouseover=\"this.style.backgroundColor='#CCC'\" onmouseout=\"this.style.backgroundColor=''\" onclick='JCalendar.click(this)'>" + tmp.innerHTML + "</div>";
    JCalendar.cur_date = parseInt(obj.innerHTML);
    obj.parentNode.innerHTML = "<span id='c_today' style='background-color:#036;color:#FFF;'>" + obj.innerHTML + "</span>";
    JCalendar.onclick(JCalendar.cur_year,JCalendar.cur_month,JCalendar.cur_date);
    
}

JCalendar.onclick = function(year,month,date){//点击日期时执行的函数，可以更改为自己需要函数,控件传递过来的参数为当前日期
    //alert(year + "年" + month + "月" + date + "日");
//    alert(JCalendar._id);
    
    $("#"+JCalendar._id).val(year+"-"+month+"-"+date);
    $("#calendar_contain_1").hide();
}