JavaScript blog式日历控件

近来要做一个记事本系统,想找一个合适的日历控件,但网上的都是那种日历选择控件。
于是到qq的记事本系统找了一个,但里面的算法有点落后,所以用了它的样式自己写了个。

效果:

<<
>>


程序说明

【Date】

这个日历控件运用了很多Date相关操作和方法。

先说说Date对象几个有用的属性:
getFullYear:返回年份值
getMonth:返回月份值
getDate:返回一个月中的日期值
getDay:返回一周中的日期值

其中对getDay可能比较陌生,下面列出值对应的星期:
值 星期
0 星期天
1 星期一
2 星期二
3 星期三
4 星期四
5 星期五
6 星期六

这几个属性都是根据本地时间获取的,还有getUTCFullYear、getUTCMonth、getUTCDate、getUTCDay这几个属性是全球标准时间对应的值。

下面说说获取日期对象,获取当前日期很简单:

new Date()


获取指定日期:

new Date(this.options.SelectDay)


获取指定年月日的日期:

new Date(this.Year, this.Month - 1, d)


下面是几个比较有技巧的地方:

首先,做日历控件时需要知道该月第一天离星期天的天数,参照getDay对应值,发现这刚好等于该月第一天的getDay值,所以可以这样获得:

new Date(this.Year, this.Month - 11).getDay()

还有是获取该月的天数,这里比较精妙,通过获取该月最后一天的getDate值就可以得到该月的天数,但没有办法直接获取该月最后一天。
这里有一个方法,当获取指定年月日的日期时,设置日参数为0,就可以获取上一个月的最后一天,所以可以这样获取:

new Date(this.Year, this.Month, 0).getDate()


这个方法是很久以前在别人代码中发现的。

使用说明:

首先是实例化一个Calendar,并设置参数。
参数说明:
Year:要显示的年份
Month:要显示的月份
SelectDay:选择日期
onSelectDay:在选择日期触发
onToday:在当天日期触发
onFinish:日历画完后触发

一般SelectDay设置成选择了的日期,并在onSelectDay中设置一个函数用来设置这个日期的样式,
例如实例里SelectDay设置成今个月10号并在那天样式设为onSelect:

SelectDay: new Date().setDate(10),
onSelectDay: 
function(o){ o.className = "onSelect"; },

而onToday就用来设置今日日期的样式,
例如实例里面把今天的日期的样式设为onToday:

onToday: function(o){ o.className = "onToday"; },

在onFinish中可以放需要设置日历的程序。
可以通过this.Year和this.Month获取当前日历显示的年份和月份。
对有数据的日期的也在这里设置,例如实例中是有一个当前月份的有数据的日期列表,然后根据这个列表对相应的日期进行设置:

Code

实例中是固定了这个日期列表,实际应用中可以根据年份月份获取对应的日期列表,
个人推荐用年份月份通过ajax获取。

程序还有下面这几个方法:
NowMonth:显示当前月
PreMonth:显示上一月
NextMonth:显示下一月
PreYear:显示上一年
NextYear:显示下一年
PreDraw:根据日期参数画日历

程序代码:

Code



测试代码:

Code




完整实例下载

posted @ 2008-08-23 00:25  cloudgamer  阅读(53295)  评论(80编辑  收藏  举报