一步步教你实现跨游览器的JS日历
最终效果可参见左边栏的日历（注，一定要在非IE下才可以浏览到，因为我还没有完全突破博客园的脚本封锁。在非IE游览器中，原日历被我hack掉，换成我的日历，可点击箭头选择年份与月份，日期上有悬浮效果与点击变色效果！）
在开始之前我们先复习一下javascript的Date对象，这是一个内置对象，它包含了一系列方法供我们操作。按功能可以分为以下三大类：
获得时间方法：
- getDate() 查看Date对象并返回日期
- getDay() 返回星期几
- getHours() 返回小时数
- getMinutes() 返回分钟数
- getMonth() 返回月份值
- getSeconds() 返回秒数
- getMilliseconds()返回毫秒值
- getTime() 返回完整的时间
- getYear() 返回年份
- getFullYear()返回一个四位数表示的年份
- getTimezoneOffset() 返回本地时间和GMT相差的分钟数
注：用getYear()返回的数并不一定是4位的！处于1900年和1999年间的getYear()方法返回的只有两位数。在此之前的或是在此之后的年份返回的都是四位数的。getYear()方法不应该再使用了。推荐使用getFullYear方法。另，javascript也提系列基于世界时的时间设置函数，如 getUTCDate()，getUTCDay()，getUTCFullYear()，getUTCHours()，getUTCMilliSeconds()，getUTCMinutes()，getUTCMonth ()与getUTCSeconds()方法。
1.
/********根据一个日期求得星期，如'2009-6-21' return 0（星期日）***********/
2.
var get_day = function (strDate){
3.
var f = strDate.replace(/-/g,'/');
4.
f = new Date(f).getDay();
5.
return "星期"+"天一二三四五六".split('')[f]
6.
}
7.
alert(get_day('2009-7-25'))
设置时间方法：
- setDate() 改变Date对象的日期
- setYear() 改变年份
- setMonth() 改变月份
- setHours() 改变小时数
- setMinutes() 改变分钟数
- setSeconds() 改变秒数
- setTime() 改变完整的时间
注，由于javascript是从0开始的，因此需要对月份进行操作时要加1 .
| 参数 | 描述 |
|---|---|
| month | 必需。一个表示月份的数值，该值介于 0（一月） ~ 11（十二月） 之间。 |
| day | 可选。一个表示月的某一天的数值，该值介于 1 ~ 31 之间（以本地时间计）。在 EMCAScript 标准化之前，不支持该参数。 |
1.
var now = new Date()
2.
var currentMonth = now.getMonth() -1 //获得当前的月份
3.
var nextMonth = now.getMonth() //获得下一个月的月份
1.
//用javascript取得某一年的第一个星期一的日期
2.
function get(year) {
3.
var d = new Date(year, 1, 1);
4.
var day = d.getDay(); //获取1月1号是星期几
5.
d.setDate((8 - day) % 7 + 1);
6.
return d;
7.
}
01.
//求前 n 天或者后 n 天的日期(用xxxx-xx-xx表示)
02.
var showdate = function(n){
03.
var d = new Date();
04.
d.setDate(d.getDate()+n);
05.
//或者 d = d.getFullYear() + "-" + (d.getMonth()+1) + "-" + d.getDate();
06.
d = d.toLocaleDateString().replace(/[\u4e00-\u9fa5]/g,'-').replace(/-$/,'')
07.
return d;
08.
}
09.
alert("今天是："+showdate(0));
10.
alert("昨天是："+showdate(-1));
11.
alert("明天是："+showdate(1));
12.
alert("10天前是："+showdate(-10));
13.
alert("8天后是："+showdate(8));
1.
//将2005-8-5转换成2005-08-05格式
2.
var strDate = '2005-8-5';
3.
window.alert(strDate.replace(/\b(\w)\b/g, '0$1'));
01.
// 对Date的扩展，将 Date 转化为指定格式的String
02.
// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
03.
// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
04.
// 例子：
05.
// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
06.
// (new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
07.
Date.prototype.Format = function(fmt) { //@author: meizz
08.
var o = {
09.
"M+" : this.getMonth()+1, //月份
10.
"d+" : this.getDate(), //日
11.
"h+" : this.getHours(), //小时
12.
"m+" : this.getMinutes(), //分
13.
"s+" : this.getSeconds(), //秒
14.
"q+" : Math.floor((this.getMonth()+3)/3), //季度
15.
"S" : this.getMilliseconds() //毫秒
16.
};
17.
if(/(y+)/.test(fmt))
18.
fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
19.
for(var k in o)
20.
if(new RegExp("("+ k +")").test(fmt))
21.
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
22.
return fmt;
23.
}
转换时间方法：
- toGMTString() 把Date对象的日期(一个数值)转变成一个GMT时间字符串，返回类似下面的值:Weds,15 June l997 14:02:02 GMT(精确的格式依赖于计算机上所运行的操作系统而变)
- toLocaleString() 把Date对象的日期(一个数值)转变成一个字符串，使用所在计算机上配置使用的特定日期格式
- UTC() 使用Date UTC(年、月、日、时、分、秒)，以自从1970年1月1日00:00:00(其中时、分、秒是可选的)以来的毫秒数的形式返回
- toLocaleDateString() 方法可根据本地时间把 Date 对象的日期部分转换为字符串，并返回结果
- toLocaleTimeString() 方法可根据本地时间把 Date 对象的时间部分转换为字符串，并返回结果
仅显示当前月的日历
javascript日历可以写得很简单，也可以弄得很复杂。作为起步，我们先实现当前月的显示，然后再一点点改进。（其实我就不明白，分明是一个个月显示的，为什么不叫月历，而叫日历？！）
我们先观察左边这个样板，日历通常是分为三部分，最上方是年份与星期数，中间是按一定规则排列的天数，最下方是按钮，当然这幅图缺了这个。一般而言，难点就是中间部分。我们要确定当月的第一天是星期几，要与上方的星期数对应，然后一个接一个向下排。而放置天数的方法，一般都是塞在一个表格中，需要嵌套循环来分别生成tr与td。为此，我想到另一个方法，把天数放置a元素中，利用液体布局的方式让它们自然地从左到右从上到下排列在一个div中。这样做个好处，就是hover样式是css原生的，不需要我们通过js的mouseover事件来绑定。为了塞满div，并分行显示，我们需要指定a元素的display为block，这样它的宽与高才能生效，但这样一行只能有一个a元素，因此我们还得指定其向左浮动，并限制div的宽与高，这样元素就按照我们的想法排序了。为了防止元素溢出，我们同时得把其容器也浮动。
现在的问题怎样设置这些元素的内容，日历上面的空间并不都有数字的。首先我们得知道当前月第一天是星期几，因为js会把星期几转化为我们日历的第一行的数字；然后的问题是这个月有几天。我们先做个测试，把数组填空了再说！
01.
window.onload = function(){
02.
//*********************第一阶段，填空日期数组*******************
03.
var now = new Date(),
04.
date = now.getDate(),//当前天数
05.
month = now.getMonth() + 1,//当前的月份
06.
year = now.getFullYear(),//当前的年份
07.
firstday = new Date(now.getFullYear(), month -1 ,1).getDay(), //求出当月的第一天是星期几
08.
lastday = new Date(now.getFullYear(), month , 0).getDate(),//上月的第0天就是今月的最后一天
09.
dates = lastday,//最后一天的号数就是这个月的天数
10.
arr = new Array(42);//用来装载日期的数组，日期以‘xxxx-xx-xx’的形式表示
11.
for(var i = 0,j = firstday; i < dates ; i ++ ,j ++){
12.
arr[j] = year +'-'+ month +'-'+ (i+1) ;
13.
}
14.
/***********************以下是测试部分**********************/
15.
for(var i = 0;i <42;i++){
16.
document.write(arr[i]+' ');//打印测试结果
17.
}
18.
}
接着下来我们就可以绘制UI了，我们用一个DIV来代表日历本身，头部由填满一行的span表示（也就是把span的display设为block），紧接着是星期数，它们都是a元素，下面是日期数，也是a元素。我们需要区分a元素的样式，让表示星期数的带上一个class来特别设置。样式我们暂时放弃动态生成。
01.
<!doctype html>
02.
<html dir="ltr" lang="zh-CN">
03.
<head>
04.
<meta charset="utf-8"/>
05.
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
06.
<title>跨游览器的JS日历</title>
07.
<style type="text/css">
08.
#jcalendar {
09.
width:210px;
10.
background:#E0ECF9;
11.
border:1px solid #479AC7;
12.
float:left;
13.
}
14.
#jcalendar span {
15.
float:left;
16.
width:210px;
17.
height:20px;
18.
background:#479AC7;
19.
color:#f90;
20.
font-weight:bolder;
21.
text-align:center;
22.
}
23.
#jcalendar .week {
24.
background:#D5F3F4;
25.
color:#808080;
26.
}
27.
#jcalendar .current{
28.
background:#336699;
29.
color:#fff;
30.
}
31.
#jcalendar a {
32.
display:block;
33.
float:left;
34.
width:30px;
35.
height:20px;
36.
color:#000;
37.
line-height:20px;
38.
text-align:center;
39.
text-decoration:none;
40.
}
41.
42.
</style>
43.
<script type="text/javascript">
44.
</script>
45.
</head>
46.
<body>
47.
</body>
48.
</html>
01.
window.onload = function(){
02.
//*********************第一阶段，填空日期数组*******************
03.
//***************************略**************************
04.
//**********************第二阶段，绘制UI******************
05.
var body = document.getElementsByTagName('body')[0],//body的快捷引用
06.
a = document.createElement('a'),//日历的a元素，用于克隆
07.
calendar = document.createElement('div'),//日历的容器元素
08.
thead = document.createElement('span');//日历的头部或页眉
09.
body.insertBefore(calendar,null);//把日历加入DOM树中
10.
calendar.setAttribute('id','jcalendar');
11.
thead.innerHTML = year +"年 " + month +"月"
12.
calendar.appendChild(thead);
13.
var weeks = "日一二三四五六".split('');//日历第二行的内容，显示星期几
14.
for(i = 0;i< 7;i++){
15.
var th = a.cloneNode();
16.
th.innerHTML = weeks[i];
17.
th.className = 'week';
18.
calendar.appendChild(th);
19.
}
20.
for(i = 0;i <42;i++){
21.
var td = a.cloneNode();
22.
if(arr[i] == undefined ){
23.
calendar.appendChild(td);
24.
}else{
25.
var html = arr[i].split('-')[2];
26.
td.innerHTML = html;
27.
if(html == date){
28.
td.className = 'current';
29.
}
30.
calendar.appendChild(td);
31.
}
32.
}
33.
}
好了，静态的日历就做出来了，现在我们加入动态元素，在头部添加四个按钮，让它选择上一月，下一月，上一年与下一年。由于我们的日历是基于那个填空数组，而填空数组是是基于年份与月份，因此年份与月份一改变，我们就不可避免地重绘整个日历。我们把重绘日历的逻辑独立出来做成一个函数，好让按钮上的函数去调用它！并在日期上添加悬浮效果与单击事件。
添加新样式
01.
#jcalendar .ybn {
02.
color:#000;
03.
}
04.
#jcalendar .mbn {
05.
color:#000040;
06.
}
07.
#jcalendar .weekend {
08.
color:#f00!important;
09.
}
10.
#jcalendar a.day:hover{
11.
background:#99C3F6;
12.
}
javascript修改为：
01.
var fillArray = function(year,month){
02.
var firstday = new Date(year, month -1 ,1).getDay(), //求出当月的第一天是星期几
03.
lastday = new Date(year, month , 0).getDate(),//上个月的第零天就是今个月的最后一天
04.
dates = lastday,//最后一天的号数就是这个月的天数
05.
arr = new Array(42);//用来装载日期的数组，日期以‘xxxx-xx-xx’的形式表示
06.
for(var i = 0,j = firstday; i < dates ; i ++ ,j ++){
07.
arr[j] = year +'-'+ month +'-'+ (i+1) ;
08.
}
09.
return arr;
10.
}
11.
var nextmonth = function(year,month,date){//按钮事件1
12.
month = month + 1;
13.
if(month > 12) year = year +1,month = 1;
14.
var arr = fillArray(year,month);
15.
drawCalendar(arr,year,month,date);
16.
}
17.
var nextyear = function(year,month,date){//按钮事件2
18.
year = year + 1;
19.
var arr = fillArray(year,month);
20.
drawCalendar(arr,year,month,date);
21.
}
22.
var premonth = function(year,month,date){//按钮事件3
23.
month = month - 1;
24.
if(month < 1) year = year -1,month =12;
25.
var arr = fillArray(year,month);
26.
drawCalendar(arr,year,month,date);
27.
}
28.
var preyear = function(year,month,date){//按钮事件4
29.
year = year - 1;
30.
var arr = fillArray(year,month);
31.
drawCalendar(arr,year,month,date);
32.
}
33.
var drawCalendar = function(arr,year,month,date){
34.
var _calendar = document.getElementById("jcalendar");
35.
if(_calendar) _calendar.parentNode.removeChild(_calendar);
36.
37.
var body = document.getElementsByTagName('body')[0],//body的快捷引用
38.
a = document.createElement('a'),//日历的a元素，用于克隆
39.
calendar = document.createElement('div'),//日历的容器元素
40.
thead = document.createElement('span');//日历的头部或页眉
41.
body.insertBefore(calendar,null);//把日历加入DOM树中
42.
calendar.setAttribute('id','jcalendar');
43.
var args = year+','+month+','+date,
44.
preyear = '<TT class=ybn onclick="preyear('+args+')"><<</TT>',
45.
premonth = '<TT class=mbn onclick="premonth('+args+')"><</TT>',
46.
nextmonth = '<TT class=mbn onclick="nextmonth('+args+')">></TT>',
47.
nextyear = '<TT class=ybn onclick="nextyear('+args+')">>></TT>',
48.
str = new Date(args.replace(/,/g,'/')).toLocaleDateString();
49.
thead.innerHTML = preyear + ' '+premonth + ' '+str+' '+nextmonth + ' '+nextyear;
50.
calendar.appendChild(thead);
51.
var weeks = "日一二三四五六".split('');//日历第二行的内容，显示星期几
52.
for(i = 0;i< 7;i++){
53.
var th = a.cloneNode();
54.
th.innerHTML = weeks[i];
55.
th.className = 'week';
56.
calendar.appendChild(th);
57.
}
58.
for(i = 0;i <42;i++){
59.
var td = a.cloneNode();
60.
if(arr[i] == undefined ){
61.
calendar.appendChild(td);
62.
}else{
63.
var html = arr[i].split('-')[2];
64.
td.innerHTML = html;
65.
td.className = 'day';
66.
td.href = "javascript:void(0)";//为ie6准备的
67.
if(date && html == date){
68.
td.className = td.className +' current';
69.
}
70.
if(i%7 == 0 || i%7 == 6){
71.
td.className = td.className +' weekend';
72.
}
73.
td.onclick = (function(i){
74.
return function(){
75.
alert(i);//这里后面我们要修改，让arr[i]填空文本域
76.
}
77.
})(arr[i]);
78.
calendar.appendChild(td);
79.
}
80.
}
81.
}
82.
window.onload = function(){
83.
//*********************第一阶段，填空日期数组*******************
84.
var now = new Date(),
85.
month = now.getMonth() + 1,//当前的月份
86.
year = now.getFullYear(),//当前的年份
87.
date = now.getDate(),
88.
arr = fillArray(year,month);
89.
//**********************第二阶段，绘制UI******************
90.
drawCalendar(arr,year,month,date);
91.
}
好了，该有的都有了，现在封装一下它吧。把上面四个按钮事件合并成一个，加个更见名达义的名称，然后统统塞到一个类中。
001.
var Class = {
002.
create: function() {
003.
return function() {
004.
this.initialize.apply(this, arguments);
005.
}
006.
}
007.
}
008.
//*********************Jcalendar类开始**********************
009.
var Jcalendar = Class.create();
010.
Jcalendar.prototype = {
011.
initialize:function(){
012.
var $ = new Date();
013.
this.drawCalendar($.getFullYear(),$.getMonth() + 1,$.getDate());
014.
},
015.
fillArray : function(year,month){
016.
var f = new Date(year, month -1 ,1).getDay(), //求出当月的第一天是星期几
017.
dates = new Date(year, month , 0).getDate(),//上个月的第零天就是今个月的最后一天
018.
arr = new Array(42);//用来装载日期的数组，日期以‘xxxx-xx-xx’的形式表示
019.
for(var i = 0; i < dates ; i ++ ,f ++){
020.
arr[f] = year +'-'+ month +'-'+ (i+1) ;
021.
}
022.
return arr;
023.
},
024.
drawCalendar : function(year,month,date){
025.
var $ = document,$$ = 'createElement',
026.
_calendar = $.getElementById("jcalendar");
027.
if(_calendar) _calendar.parentNode.removeChild(_calendar);//推倒重绘！
028.
var body = $.getElementsByTagName('body')[0],//body的快捷引用
029.
weeks = "日一二三四五六".split(''),//日历第二行的内容，显示星期几
030.
calendar = $[$$]('div'),//日历的容器元素
031.
a = $[$$]('a'),//日历的a元素，用于克隆
032.
tt = $[$$]("tt"),//日历页眉的tt元素，用于克隆
033.
thead = $[$$]('span'),//日历页眉
034.
fragment = $.createDocumentFragment(),//减少DOM刷新页面的次数
035.
arr = this.fillArray(year,month),//保存当月的日期
036.
tts = [],//用于保存tt元素的引用
037.
ths = this;//用于保存Jcalendar对象的实例的引用
038.
body.insertBefore(calendar,null);//把日历加入DOM树中
039.
calendar.setAttribute('id','jcalendar');
040.
for(var i = 0;i<4;i++){//循环生成出个时间按钮。
041.
var clone = tt.cloneNode(true);//比重新createElement快
042.
clone.onclick = (function(index){
043.
return function(){//在闭包里绑定事件
044.
ths.redrawCalendar(year,month,date,index)
045.
}
046.
})(i);
047.
tts[i] = clone;//保存引用
048.
if(i==2) thead.appendChild($.createTextNode(year+"年"+month+"月"+date+"日"));
049.
thead.appendChild(clone);
050.
}
051.
tts[0].innerHTML = '<<';
052.
tts[1].innerHTML = '<';
053.
tts[2].innerHTML = '>';
054.
tts[3].innerHTML = '>>';
055.
tts[0].className = tts[3].className = 'mbn';
056.
tts[1].className = tts[2].className = 'ybn';
057.
fragment.appendChild(thead);
058.
for(i = 0;i <7;i++){//星期显示区
059.
var th = a.cloneNode(true);
060.
th.innerHTML = weeks[i];
061.
th.className = 'week';
062.
fragment.appendChild(th);
063.
}
064.
for(i = 0;i <42;i++){//日期显示区
065.
var td = a.cloneNode(true);
066.
if(arr[i] == undefined ){
067.
fragment.appendChild(td);
068.
}else{
069.
var html = arr[i].split('-')[2];
070.
td.innerHTML = html;
071.
td.className = 'day';
072.
td.href = "javascript:void(0)";//为ie6准备的
073.
(date && html == date)&&(td.className += ' current') ;//高亮每个月今天这一天
074.
(i%7 == 0 || i%7 == 6)&&(td.className += ' weekend') ;//为周末添加多一个类
075.
td.onclick = (function(i){
076.
return function(){
077.
alert(i);
078.
}
079.
})(arr[i]);
080.
fragment.appendChild(td);
081.
}
082.
}
083.
calendar.appendChild(fragment);
084.
},
085.
086.
redrawCalendar : function(year,month,date,index){
087.
switch(index){
088.
case 0 ://preyear
089.
year--;
090.
break;
091.
case 1://premonth
092.
month--;
093.
(month < 1) &&(year--,month = 12) ;
094.
break;
095.
case 2://nextmonth
096.
month++;
097.
(month > 12)&&(year++,month = 1) ;
098.
break;
099.
case 3://nextyear
100.
year++;
101.
break;
102.
}
103.
this.drawCalendar(year,month,date);
104.
}
105.
}
106.
//*********************Jcalendar类结束**********************
107.
window.onload = function(){
108.
new Jcalendar();
109.
}
上面的按钮的显示符号应该是<与>，而不是单纯的小于号或大于号，这是高亮插件的缘故……另，这个日历改一改，就可以成为弹出式日期选择器了！至于它，下次有次再说！