使用说明：程序比较简单，代码中都有说明，这里说说怎么使用。 首先是实例化一个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（显示下一个月）。 测试代码： blog式日历控件_www.jb51.net_脚本之家 .Calendar { font-family:Verdana; font-size:12px; background-color:#e0ecf9; text-align:center; width:200px; height:160px; padding:10px; line-height:1.5em; } .Calendar a{ color:#1e5494; } .Calendar table{ width:100%; border:0; } .Calendar table thead{color:#acacac;} .Calendar table td { font-size: 11px; padding:1px; } #idCalendarPre{ cursor:pointer; float:left; padding-right:5px; } #idCalendarNext{ cursor:pointer; float:right; padding-right:5px; } #idCalendar td.onToday { font-weight:bold; color:#C60; } #idCalendar td.onSelect { font-weight:bold; } << >> 2008年 8月 日 一 二 三 四 五 六 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

　　推荐阅读

　　js判断输入是否中文，数字，身份证等等js函数集合第1/3页

* 判断指定的内容是否为空，若为空则弹出 警告框 */ function isEmpty(theValue, strMsg){ if(theValue==""){ alert(strMsg+"不能为空!"); return true; } return false; } /* 中文判断函数，允许生僻字用英文“*”>>>详细阅读

本文标题：JavaScript blog式日历控件新算法

地址：http://www.17bianji.com/kaifa2/JS/29425.html

 1/2    1