位置：首页>> 网络编程>> JavaScript>> 较完善的日历组件js源码（兼容）

较完善的日历组件js源码（兼容）

作者：davc　来源：51js　发布时间：2010-08-08 08:43:00　

标签：日历,兼容,js

根据"客服果果"的"十几行的超简日历组件"http://bbs.51js.com/viewthread.php?tid=82313&highlight=％C2％E9％C8％B8改写

看到果果的日历组件，惊叹于果果的水平，但觉得使用上不是太方便，就略作修改

修改内容：

1.更改调用方式，采用文本框的onclick事件调用

2.增加快速选择年月功能，单击控件上标题行上的年，可以打开年列表，可以直接选取，单击月则直接选月

3.修改界面

4.兼容性修改（源程序在FF下有点小问题）

5.其它修改

6.没了

<html> <style> #rl{cursor:pointer;border: 1px #0000FF solid;position:absolute;width:145px;font-family:Arial;background:#F0F6FF;height:157;text-align:center;font-size:12px;}#rl a,#rl b{float:left;width:20px;line-height:20px;color:#000;text-decoration:none;}#rl b{background:#DEEBFF;}#rl a:hover{background:#227AFF;}#rl .cur{background:#FF9900;color:#fff;font-weight:bold;}#rl .cay{width:35px;}#rl .btn{color:#0000ff;font-weight:bold;}#rl .tit{width:60px;color:#ff0000;} </style> <script type="text/javascript"> function $(i) { return document.getElementById(i) } var CL = { init: function(v) { this.N = new Date; this.v = v; this.set(0, this.N.getMonth()); this.showTo(); }, showTo: function() { v = this.v; for (var pos = { x: 0, y: 0 }, N = v; v; v = v.offsetParent) { pos.x += v.offsetLeft; pos.y += v.offsetTop }; document.title = [pos.x, pos.y]; with($("rl").style) { left = pos.x + "px"; top = (pos.y + N.offsetHeight) + "px"; display = "" } }, set: function(y, m) { var u = '', week = '日一二三四五六'.split(''), N = this.N, Y = N.getFullYear(), M = N.getMonth(), D = N.getDate(), fn = function(a, b) { return '<b onclick="CL.set(' + a + ')">' + b + '</b>' }; y && N.setYear(y), N.setMonth(m < 1 ? N.getMonth() - 1 : m), Y = N.getFullYear(), M = N.getMonth(); var W = new Date(Y, M, 1).getDay(), Da = new Date(Y, M + 1, 0).getDate(); u += fn((Y - 1) + ',' + M, '<<') + fn(Y + ',' + (M - 1), '<') + '<a class=tit><span onclick=CL.yms(' + M + ',' + Y + ')>' + Y + '</span>-<span onclick=CL.yms(' + M + ',0)>' + (M + 1) + '</span></a>' + fn(Y + ',' + (M + 1), '>') + fn((Y + 1) + ',' + M, '>>'); for (var i = 0; i < 7; i++) u += '<b>' + week[i] + '</b>'; for (i = 0; i < W; i++) u += '<a> </a>'; for (i = 0; i < Da; i++) u += '<a href="javascript:CL.clo(' + Y + ',' + (M + 1) + ',' + (i + 1) + ')"' + (i + 1 == D ? ' class="cur"': '') + '>' + (i + 1) + '</a>'; $("rl").innerHTML = u; }, clo: function(y, m, d) { if (y) { this.v.value = y + '-' + m + '-' + d; rl.style.display = "none"; } }, yms: function(m, y) { var u = ''; if (y == 0) { u += '<a class="cay"> </a>' + '<a class=tit onclick=CL.set(0,' + m + ')>返回</a>' + '<a class="cay"> </a>'; for (i = 0; i < 12; i++) u += '<a href="javascript:CL.set(0,' + i + ')" class="cay">' + (i + 1) + '</a>'; } else { u += '<a href="javascript:CL.yms(' + m + ',' + (y - 28) + ')" class="cay"><<<</a>' + '<a class=tit onclick=CL.set(0,' + m + ')>返回</a>' + '<a href="javascript:CL.yms(' + m + ',' + (y + 28) + ')" class="cay">>>></a>'; for (i = y - 16; i < y + 12; i++) u += '<a href="javascript:CL.set(' + i + ',' + m + ')" class="cay">' + i + '</a>'; } $("rl").innerHTML = u; } } </script> <body> <input name="str" type="text" onclick=CL.init(this)> <input name="str1" type="text" onclick=CL.init(this)> <br> <br> <input name="str2" type="text" onclick=CL.init(this)> <DIV id=rl style="display:none"> </DIV> </body></html>

投稿

较完善的日历组件js源码（兼容）

猜你喜欢