/***************************
*JCalendar日历控件
*@author xx
*@date 2010-1-30
***************************/
/*
*@param year 年份
*@param month 月份
/*如果参数不足三个那么就初始化为当天日期*/
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;\'>«</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;\'>»</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();
}
*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;\'>«</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;\'>»</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();
}