轻量级漂亮日历控件 JCalendar，兼容IE&FireFox

上一篇 / 下一篇 2007-04-19 10:16:49
查看( 3083 ) / 评论( 25 )
最近做项目用到日历控件，到网上找了一些，发现要么就是兼容性不好，要么就是体积庞大，或者是接口不好，最后决定自己写一个。
写完发现还是可以的，不管是界面还是接口，代码还是易用性，至少我和别的对比是这样。大家pp，欢迎提出建议或者是bug。
稍微更新了一下下，从外观上让表格不会出现最后的空行，另外不再用讨厌的超级链接按钮（超级链接的虚线太讨厌）
CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">无忧脚本oG+_'U]'N4a(W;Z:N
<html xmlns="http://www.w3.org/1999/xhtml">无忧脚本#G2L6Jy
\*}
<head>
Xz!v.PZ"B0<meta http-equiv="Content-Language" content="zh-cn" />无忧脚本+zdf2j|T
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />无忧脚本'cO2Vw{@;v^+|	B
<title>JCalendar 日历控件</title>
L&_Kx#@mf0<style type="text/css">无忧脚本N{$lFw"Pt/u7c
#calendar {
`
QB8j)@6xW$?3? b1H0        border-collapse:collapse;
I{I'C(KD5vm2b0        border:1px solid #06C;
N	Gy9LJef0        background-color:#FFF;
6t2g*T%GZ"} N!c|0        width:160px;
%hsoX	O0        height:120px;无忧脚本n&D/G"BUF,p8g
        font-size:12px;无忧脚本4O?1u:Jx
        font-family:'Lucida Grande','Lucida Sans Unicode','宋体','新宋体',arial,verdana,sans-serif;
$F}C&[R2e1J3{C0        cursor:default;
v+kv*p,F:UI
W1Y0}无忧脚本9F4J\'RX.Y5a+S-e

a#J1~5X
mU0#calendar td {无忧脚本rc.qpvLIM
        text-align:center;无忧脚本b/o#oDB{
        vertical-align:middle;
&A"RH?)zC1b0        font-family:"宋体";无忧脚本'MUH2zVo ^	F*d]
}无忧脚本m(m%s]qZu+Zqy7Z

.D7~]:jR8b;D0#calendar thead {无忧脚本B)]
KpZ
        background-color:#06C;
8rM$C7X[7s0        color:#FFF;无忧脚本I~ X+H9a	N1ct1Z
}
5G2s#\/ndvr5^7qgV0
*V
zL3YM/~0#calendar div {
'^6s-u	D.d
b7r0        width:100%;
(UeomXEh2R"?0        height:100%;
xr	FK#^Ln3tV0}
}/h)V
|D#f0
`(lkhkK
Xex0#calendar caption span {
(aEJrQ0        cursor:pointer;
My+]*}7xXq0}
[H
wO+\
H-O0
Dir4j#Sk,NO8M0#calendar #calendar_title {无忧脚本 u`|!@?%E
        cursor:default;无忧脚本
q:C'ic7k{c0K#q&m
}
'@	b(AH	b:z&CaRN0</style>
ri6~(x*wJ0<scrīpt type="text/javascrīpt">
BZ;z8V1Njq!q'Y0/***************************
:^v!f+l*SS3R$^g0*JCalendar日历控件
6YV$bNR1RyM0*@author brull无忧脚本A@.A\[)z)pG9E
*@email [email]brull@163.com[/email]
I_1Z,Oe b3j.e0*@date 2007-4-16
U9l~;\
{^0***************************/
*k2Wv*t/c_0无忧脚本7Hj!G&a?b*\-p.Y
/*
nT!s!R)A0*@param year 年份
l!E%};T?&j.fL0*@param month 月份无忧脚本oT%BzxV
*@param date 日期无忧脚本tb	a!xu
t
*/
e7u-g
@h(\%w7uy*Z0/*如果参数不足三个那么就初始化为当天日期*/
MVb3d;E(]@6@+t0{0function JCalendar (year,month,date) {
+dw O?VA"@/a"q0        var _date = arguments.length == 0 ? new Date() : new Date(year,month-1,date);
2SC1VrbX2v0        //实例变量
'`#h])?7C$t0        this.year = _date.getFullYear();
"St2m1l|}q	`b0        this.month = _date.getMonth() + 1;
`u+cS#OZ0        this.fday = new Date(this.year,this.month-1,1).getDay();//每月第一天的前一天星期数无忧脚本	~
bb2W+Fe!r(e
        this.dayNum = new Date(this.year,this.month,0).getDate();//每月的天数
2{$nq	wAv0        //成员变量，当前年月日
	C~#H2[A0        JCalendar.cur_year = this.year;
J?2a
aV0        JCalendar.cur_month = this.month;
[+B;X9H!HUv0        JCalendar.cur_date = _date.getDate();无忧脚本r'J6O+Kr0w!@
}无忧脚本}DE$C`;w%i1{
JCalendar.prototype.show = function(){
r3g@1D	i+jfi5i"z0        var date = new Array(this.fday > 0 ? this.day : 0);//预先定义一段空数组，对应日历里第一周空的位置
x9s/~0X*gjD$nL-m0        var html_str = new Array();
PaPw9oh0        var date_index = 0;无忧脚本+@	ol4}f!b\X	f,Z8gv	J
        var weekDay = ["日","一","二","三","四","五","六"];
!B8~M^"V9a0        for(var j = 1; j <= this.dayNum; j++){//初始化date数组无忧脚本7A
^2]T}D$x_:GR
                date.push(j);
q;JbWu
B-F0        }无忧脚本@;]+~ID}J;~'y$O
        html_str.push("<table id='calendar'>");
h	r_g*g c@0        html_str.push("<caption><span title='上一年份' ōnmouseover=\"this.style.color='#F90'\" ōnmouseout=\"this.style.color='#09F'\" ōnclick=\"JCalendar.update(-12);return false\" style='color:#09F;font-size:16px;margin-right:5px;'>«</span><span title='上一月份'  onmouseover=\"this.style.color='#F90'\" ōnmouseout=\"this.style.color='#09F'\" ōnclick=\"JCalendar.update(-1);return false\" style='margin-right:15px;color:#09F;'>▲</span><span id='calendar_title'>" + this.year + "年" + this.month + "月</span><span title='下一月份' ōnclick=\"JCalendar.update(1);return false\"  onmouseover=\"this.style.color='#F90'\" ōnmouseout=\"this.style.color='#09F'\" style='margin-left:15px;color:#09F;'>▼</span><span title='下一年份' ōnclick=\"JCalendar.update(12);return false\"  onmouseover=\"this.style.color='#F90'\" ōnmouseout=\"this.style.color='#09F'\" style='font-size:16px;margin-left:5px;color:#09F;'>»</span></caption>");无忧脚本#s#p$zTs;jS!nR
        html_str.push("<thead><tr>");
2Hw+S*]U9R4B0        for(var i = 0; i < 7; i++){//填充日历头
Mt
~*NYt-Z}0                html_str.push("<td>" + weekDay[i] + "</td>");无忧脚本2^Rx6]?4p,j
        }
$o@pRIT3Iv0        html_str.push("</tr></thead>");
%c
ynRMFdBK0        html_str.push("<tbody>");无忧脚本'K7AuF,q/O;|
VX6B
        for(var i = 0; i < 6; i++){//填充日期
*wL!n%J3^z0                html_str.push("<tr>");无忧脚本q1QDSY%c]
                for(var j = 0; j < 7; j++){无忧脚本1q+_	Sr$\:Wf
                        tmp = date[date_index++];无忧脚本(~Q,Ek)Q%}
                        tmp = tmp ? tmp : "";无忧脚本7Xpn*hg!I6V$y
                        if(JCalendar.cur_date == tmp)无忧脚本.Z7D"i4rA+Z[
                                html_str.push("<td><span id='c_today' style='background-color:#036;color:#FFF;'>" + JCalendar.cur_date + "</span></td>");
cS1L[C#T0                        else if(tmp == "")
(oYFJME,Fu0                                html_str.push("<td></td>");无忧脚本:Q	j{-v9x`
                        else无忧脚本\WE,x^,b,AAA
                                html_str.push("<td><div ōnmouseover=\"this.style.backgroundColor='#CCC'\" ōnmouseout=\"this.style.backgroundColor=''\" ōnclick='JCalendar.click(this)'>" + tmp + "</div></td>");

ThnHv!~0                }无忧脚本1D
d7o	Q#y.|*by7j1i.K
                html_str.push("</tr>");无忧脚本~3EC4K*E
        }
%]:W7\)QP0        html_str.push("</tbody></table>");
}PN3p?1~VE0        return html_str.join("");
^)fJ8x.Y-{0}无忧脚本Mr7E5U$B~7]
//静态方法无忧脚本1T'w1lelXPHR6M
JCalendar.update = function(_month){
\gf?.Qb?0        var date = new Date(JCalendar.cur_year,JCalendar.cur_month - 1 + _month,1);
dU6d7|;HX+Q0        var fday = date.getDay();//每月第一天的星期数
2e$m8^3qY{qVP0        var year = date.getFullYear();
 k_LR
l:W0        var month = date.getMonth() + 1;
M&FIPF.n	Q6MRr0        var dayNum = new Date(JCalendar.cur_year,JCalendar.cur_month  + _month,0).getDate();//每月的天数
k#dO/xx+j&u2]0        var tds = document.getElementById("calendar").getElementsByTagName("td");
$E	d&Nx9H'n8o0        for(var i = 7; i < tds.length; i++)//清空日历内容无忧脚本&h0I8^(W)_p}?Y9F
                tds[i].innerHTML = "";
.D*J7i,woXc^0        document.getElementById("calendar_title").innerHTML = year + "年" + month + "月";//更新显示年月
6yJK,[9@8a0        //更新当前年月无忧脚本6YCO/T'}4I3b:d,j9F
        JCalendar.cur_year = year;
7r7r$y;I(vxc:|l0        JCalendar.cur_month = month;无忧脚本;_%~GAr0]xP)u
        for(var j = 1; j <= dayNum; j++){无忧脚本%K}"G0heE{
O)Q
d3V.M~
                if(j == JCalendar.cur_date)无忧脚本+W*\.s~s0z
                        tds[6 + fday + j].innerHTML = "<span id='c_today' style='background-color:#036;color:#FFF;'>" + JCalendar.cur_date + "</span>";
_5fsn8ys]0                else无忧脚本rb:GdO
                        tds[6 + fday + j].innerHTML = "<div ōnmouseover=\"this.style.backgroundColor='#CCC'\" ōnmouseout=\"this.style.backgroundColor=''\" ōnclick='JCalendar.click(this)'>" + j + "</div>";
0s9Sd2p1}YH8DX#b0        }无忧脚本$J)Y,PA*e0aU
        JCalendar.onupdate(year,month,JCalendar.cur_date);
1q'N4esr"}0}
fmvtvs"p
I0无忧脚本#D%rP	Lq8M[
JCalendar.onupdate = function(year,month,date){//日历更改时执行的函数，可以更改为自己需要函数,控件传递过来的参数为当前日期
	ge ]:g6p7Y5H'B5i0        alert(year + "年" + month + "月" + date + "日");
+MP5o|R,Ch_4ej0y0}无忧脚本%`-H6c{,mO

y5lA]	r0JCalendar.click = function(obj){
*xwoF.z+v0        var tmp = document.getElementById("c_today");无忧脚本NKR+Z!|j
        tmp.parentNode.innerHTML = "<div ōnmouseover=\"this.style.backgroundColor='#CCC'\" ōnmouseout=\"this.style.backgroundColor=''\" ōnclick='JCalendar.click(this)'>" + tmp.innerHTML + "</div>";
oT@Hp1O0        JCalendar.cur_date = parseInt(obj.innerHTML);无忧脚本b-fTo1J){
        obj.parentNode.innerHTML = "<span id='c_today' style='background-color:#036;color:#FFF;'>" + obj.innerHTML + "</span>";
Bk6@'DJk4b0        JCalendar.onclick(JCalendar.cur_year,JCalendar.cur_month,JCalendar.cur_date);
0jOB	P
i3d2XW+D4g1ZJ0}
0lFDHs-G0无忧脚本4l8{r[/O
nD;F
JCalendar.onclick = function(year,month,date){//点击日期时执行的函数，可以更改为自己需要函数,控件传递过来的参数为当前日期无忧脚本 NHR%a@(L"uPh/t
        alert(year + "年" + month + "月" + date + "日");无忧脚本
L'H
yRur_g
}</scrīpt>
+cJ+s*VE3?W&L*i6F0</head>
A	l
JR(rPH0<body>无忧脚本:_b`k%L
<div id="calendar_contain"></div>无忧脚本"i4Fs|6dZN
<scrīpt type="text/javascrīpt">
fm'D,FLY0/***************说明***************
(nrX*T6eH0JCalendar.onclick (year,month,date)//点击日期时执行的静态函数，可以更改(或者覆盖)为自己需要函数,控件传递过来的参数为当前日期

qKie0@9c'v;y:g0JCalendar.onupdate (year,month,date){//日历更改时执行的函数，可以更改(或者覆盖)为自己需要函数,控件传递过来的参数为当前日期无忧脚本k
]V(n!t
***********************************/无忧脚本MRC#fxM
//一个例子
(GI;d(Y#A0JCalendar.onclick = function (year,month,date){无忧脚本+c-p.Y;@jZw(L
        alert("today is:" + year + "-" + month + "-" + date);无忧脚本)BHUdt
}
'my u.|Z4swk0  document.getElementById("calendar_contain").innerHTML = new JCalendar().show();
alH\d7F
P,G}0</scrīpt>
,])V6E
eC&JL0</body>
Fc_"GvYD0</html>
[本帖最后由 brull 于 2007-4-18 23:15 编辑]
关于作者

轻量级漂亮日历控件 JCalendar，兼容IE&FireFox

全部脚印 不留脚印留下脚印:

相关阅读:

关于作者

轻量级漂亮日历控件 JCalendar，兼容IE&FireFox

全部脚印 不留脚印 留下脚印:

相关阅读:

全部脚印不留脚印留下脚印:
