管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

JavaScript blog式日历控件新算法

　　使用说明：

　　程序比较简单，代码中都有说明，这里说说怎么使用。

　　首先是实例化一个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获取当前日历显示的年份和月份。

　　对有数据的日期的也在这里设置，例如实例中是有一个当前月份的有数据的日期列表，然后根据这个列表对相应的日期进行设置：

　　

复制代码 代码如下:

　　var flag = [10,15,20];

　　for(var i = 0, len = flag.length; i < len; i++){

　　this.Days[flag[i]].innerHTML = "<a href='javascript:void(0);' onclick=\"alert('日期是:"+this.Year+"/"+this.Month+"/"+flag[i]+"');return false;\">" + flag[i] + "</a>";

　　}

实例中是固定了这个日期列表，实际应用中可以根据年份月份获取对应的日期列表，

　　个人推荐用年份月份通过ajax获取。

　　程序中还有两个有用的方法PreMonth（显示上一个月）和NextMonth（显示下一个月）。

　　测试代码：

　　

　　 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

教程首页 更多教程