基于Firefox浏览器与IE浏览器的通用型日历控件

1、基于Firefox / IE 浏览器的日历控件程序是以 脚本之家 流行的 基于IE浏览器的Calendar.js程序为模板，经多人修改完善，现 支持多版本浏览器，需要两个文件WebCalendar.js与WebCalendar.html具体代码如下WebCalendar.js/*-基于IE / Firefox浏览器-*/var cal;var isFocus=false; /是否为焦点var pickMode ="second":1,"minute":2,"hour":3,"day":4,"month&q

2、uot;:5,"year":6 ;var topY=0,leftX=0; /自定义定位偏移量/选择日期 通过 ID 来选日期function SelectDateById(id,strFormat,x,y) var obj = document.getElementById(id); if(obj = null)return false; obj.focus(); if(obj.onclick != null)obj.onclick(); else if(obj.click != null)obj.click(); elseSelectDate(obj,strFormat,

3、x,y)/选择日期 function SelectDate(obj,strFormat,x,y) leftX =(x = null) ? leftX : x; topY =(y = null) ? topY : y;/自定义定位偏移量 if(document.getElementById("ContainerPanel")=null)InitContainerPanel();var date = new Date();var by = date.getFullYear()-50; /最小值 50 年前var ey = date.getFullYear()+50; /最大值

4、50 年后/cal = new Calendar(by, ey,1,strFormat); /初始化英文版，0 为中文版cal = (cal=null) ? new Calendar(by, ey, 0) : cal; /不用每次都初始化cal.DateMode =pickMode"second" /复位if(strFormat.indexOf('s')< 0) cal.DateMode =pickMode"minute"/精度为分if(strFormat.indexOf('m')< 0) cal.DateMo

5、de =pickMode"hour"/精度为时if(strFormat.indexOf('h')< 0) cal.DateMode =pickMode"day"/精度为日if(strFormat.indexOf('d')< 0) cal.DateMode =pickMode"month"/精度为月if(strFormat.indexOf('M')< 0) cal.DateMode =pickMode"year"/精度为年if(strFormat.in

6、dexOf('y')< 0) cal.DateMode =pickMode"second"/默认精度为秒cal.dateFormatStyleOld = cal.dateFormatStyle;cal.dateFormatStyle = strFormat;cal.show(obj);/*/*/*/*/*/*/*/* 返回日期* param d the delimiter* param p the pattern of your date根据用户指定的 style 来确定；*/Stotype.toDate = function(sty

7、le) var y = this.substring(style.indexOf('y'),style.lastIndexOf('y')+1);/年var M = this.substring(style.indexOf('M'),style.lastIndexOf('M')+1);/月var d = this.substring(style.indexOf('d'),style.lastIndexOf('d')+1);/日var h = this.substring(style.indexOf(&

8、#39;h'),style.lastIndexOf('h')+1);/时var m = this.substring(style.indexOf('m'),style.lastIndexOf('m')+1);/分var s = this.substring(style.indexOf('s'),style.lastIndexOf('s')+1);/秒if(s = null |s = "" | isNaN(s) s = new Date().getSeconds();if(m = null

9、 |m = "" | isNaN(m) m = new Date().getMinutes();if(h = null |h = "" | isNaN(h) h = new Date().getHours();if(d = null |d = "" | isNaN(d) d = new Date().getDate();if(M = null |M = "" | isNaN(M) M = new Date().getMonth()+1;if(y = null |y = "" | isNaN(y)

10、 y = new Date().getFullYear();var dt ;eval ("dt = new Date('"+ y+"', '"+(M-1)+"','"+ d+"','"+ h+"','"+ m+"','"+ s +"')");return dt;/*/*/*/*/*/*/*/* 格式化日期* param d the delimiter* para

11、m p the pattern of your date* author meizz*/Dtotype.format = function(style) var o = "M+" : this.getMonth() + 1, /month"d+" : this.getDate(), /day"h+" : this.getHours(), /hour"m+" : this.getMinutes(), /minute"s+" : this.getSeconds(), /second&q

12、uot;w+" : "天一二三四五六".charAt(this.getDay(), /week"q+" : Math.floor(this.getMonth() + 3) / 3), /quarter"S" : this.getMilliseconds() /millisecondif(/(y+)/.test(style) style = style.replace(RegExp.$1,(this.getFullYear() + "").substr(4 - RegExp.$1.length);for(v

13、ar k in o)if(new RegExp("("+ k +")").test(style)style = style.replace(RegExp.$1,RegExp.$1.length = 1 ? ok :("00" + ok).substr("" + ok).length);return style;Ctotype.ReturnDate = function(dt) if (this.dateControl != null)this.dateControl.value = dt;ca

14、lendar.hide(); if(this.dateControl.onchange = null)return; /将 onchange 转成其它函数，以免触发验证事件var ev = this.dateControl.onchange.toString(); /找出函数的字串ev = ev.substring( (ev.indexOf("ValidatorOnChange();")> 0) ? ev.indexOf("ValidatorOnChange();") + 20 : ev.indexOf("") + 1) , e

15、v.lastIndexOf("");/去除验证函数 ValidatorOnChange(); var fun = new Function(ev); /重新定义函数 this.dateControl.changeEvent = fun; this.dateControl.changeEvent();/触发自定义 changeEvent 函数/*/*/*/*/*/*/*/* 日历类* param beginYear 1990* param endYear 2010* param lang 0(中文)|1(英语) 可自由扩充* param dateFormatStyle &qu

16、ot;yyyy-MM-dd"* version 2006-04-01* author KimSoft (jinqinghua at )* update*/function Calendar(beginYear, endYear, lang, dateFormatStyle) this.beginYear = 1950;this.endYear = 2050;this.lang = 0; /0(中文) | 1(英文)this.dateFormatStyle = "yyyy-MM-dd hh:mm:ss"if (beginYear != null &&

17、 endYear != null)this.beginYear = beginYear;this.endYear = endYear;if (lang != null)this.lang = langif (dateFormatStyle != null)this.dateFormatStyle = dateFormatStylethis.dateControl = null;this.panel = this.getElementById("calendarPanel");this.container = this.getElementById("Contain

18、erPanel");this.form = null;this.date = new Date();this.year = this.date.getFullYear();this.month = this.date.getMonth();this.day = this.date.getDate();this.hour = this.date.getHours();this.minute = this.date.getMinutes();this.second = this.date.getSeconds();this.colors = "cur_word" :

19、"#FFFFFF", /当日日期文字颜色"cur_bg" : "#00FF00", /当日日期单元格背影色"sel_bg" : "#FFCCCC", /已被选择的日期单元格背影色"sun_word" : "#FF0000", /星期天文字颜色"sat_word" : "#0000FF", /星期六文字颜色"td_word_light" : "#333333", /单元格文字颜色

20、"td_word_dark" : "#CCCCCC", /单元格文字暗色"td_bg_out" : "#EFEFEF", /单元格背影色"td_bg_over" : "#FFCC00", /单元格背影色"tr_word" : "#FFFFFF", /日历头文字颜色"tr_bg" : "#666666", /日历头背影色"input_border" : "#CCCCCC

21、", /input控件的边框颜色"input_bg" : "#EFEFEF" /input控件的背影色/* /放到了 show ，因为要做 pickMode 判断this.draw();this.bindYear();this.bindMonth();*/this.changeSelect();/this.bindData();/*/*/*/*/*/*/*/* 日历类属性（语言包，可自由扩展）*/Calendar.language = "year" : "", "","mon

22、ths" : "一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月","JAN","FEB","MAR","APR","MAY","JUN","JUL&

23、quot;,"AUG","SEP","OCT","NOV","DEC","weeks" : "日","一","二","三","四","五","六","SUN","MON","TUR","WED","THU","FRI",

24、"SAT","hour" : "时", "H","minute" : "分", "M","second" : "秒", "S","clear" : "清空", "CLS","today" : "今天", "TODAY","pickTxt" : "确定

25、", "OK",/pickMode 精确到年、月时把今天变成“确定”"close" : "关闭", "CLOSE"Ctotype.draw = function() calendar = this;var mvAry = ;/mvArymvAry.length = ' <form name="calendarForm" style="margin: 0px;">' /因 <form> 不能嵌套改用 Div

26、mvArymvAry.length = ' <div name="calendarForm" style="margin: 0px;">'mvArymvAry.length = ' <table width="100%" border="0" cellpadding="0" cellspacing="1" style="font-size:12px;">'mvArymvAry.length = 

27、9; <tr>'mvArymvAry.length = ' <th align="left" width="1%"><input style="border: 1px solid ' + calendar.colors"input_border" + 'background-color:' + calendar.colors"input_bg" + 'width:16px;height:20px;'if(calendar

28、.DateMode > pickMode"month")mvArymvAry.length = 'display:none;'/pickMode 精确到年时隐藏“月”mvArymvAry.length ='" name="prevMonth" type="button" id="prevMonth" value="&lt;" /></th>'mvArymvAry.length = ' <th align=&q

29、uot;center" width="98%" nowrap="nowrap"><select name="calendarYear" id="calendarYear" style="font-size:12px;"></select><select name="calendarMonth" id="calendarMonth" style="font-size:12px;'if(calen

30、dar.DateMode > pickMode"month")mvArymvAry.length = 'display:none;'/pickMode 精确到年时隐藏“月”mvArymvAry.length = '"></select></th>'mvArymvAry.length = ' <th align="right" width="1%"><input style="border: 1px solid '

31、+ calendar.colors"input_border" + 'background-color:' + calendar.colors"input_bg" + 'width:16px;height:20px;'if(calendar.DateMode > pickMode"month")mvArymvAry.length = 'display:none;'/pickMode 精确到年时隐藏“月”mvArymvAry.length ='" name=&quo

32、t;nextMonth" type="button" id="nextMonth" value="&gt;" /></th>'mvArymvAry.length = ' </tr>'mvArymvAry.length = ' </table>'mvArymvAry.length = ' <table id="calendarTable" width="100%" style=&quo

33、t;border:0px solid #CCCCCC;background-color:#FFFFFF;font-size:12px;'if(calendar.DateMode >= pickMode"month")mvArymvAry.length = 'display:none;'/pickMode 精确到年、月时隐藏“天”mvArymvAry.length = '" border="0" cellpadding="3" cellspacing="1">&#

34、39;mvArymvAry.length = ' <tr>'for(var i = 0; i < 7; i+) mvArymvAry.length = ' <th style="font-weight:normal;background-color:' + calendar.colors"tr_bg" + 'color:' + calendar.colors"tr_word" + '">' + Calendar.language"w

35、eeks"this.langi + '</th>'mvArymvAry.length = ' </tr>'for(var i = 0; i < 6;i+)mvArymvAry.length = ' <tr align="center">'for(var j = 0; j < 7; j+) if (j = 0)mvArymvAry.length = ' <td style="cursor:default;color:' + calendar

36、.colors"sun_word" + '"></td>' else if(j = 6) mvArymvAry.length = ' <td style="cursor:default;color:' + calendar.colors"sat_word" + '"></td>' else mvArymvAry.length = ' <td style="cursor:default;"><

37、/td>'mvArymvAry.length = ' </tr>'/2009-03-03 添加的代码，放置时间的行mvArymvAry.length = ' <tr style="'if(calendar.DateMode >= pickMode"day")mvArymvAry.length = 'display:none;'/pickMode 精确到时日隐藏“时间”mvArymvAry.length = '"><td align="cen

38、ter" colspan="7">'mvArymvAry.length = ' <select name="calendarHour" id="calendarHour" style="font-size:12px;"></select>' + Calendar.language"hour"this.lang;mvArymvAry.length = '<span style="'if(calendar

39、.DateMode >= pickMode"hour")mvArymvAry.length = 'display:none;'/pickMode 精确到小时时隐藏“分”mvArymvAry.length = '"><select name="calendarMinute" id="calendarMinute" style="font-size:12px;"></select>' + Calendar.language"minu

40、te"this.lang+'</span>'mvArymvAry.length = '<span style="'if(calendar.DateMode >= pickMode"minute")mvArymvAry.length = 'display:none;'/pickMode 精确到小时、分时隐藏“秒”mvArymvAry.length = '"><select name="calendarSecond" id="c

41、alendarSecond" style="font-size:12px;"></select>'+ Calendar.language"second"this.lang+'</span>'mvArymvAry.length = ' </td></tr>'mvArymvAry.length = ' </table>'/mvArymvAry.length = ' </from>'mvArymvAry

42、.length = ' <div align="center" style="padding:4px 4px 4px 4px;background-color:' + calendar.colors"input_bg" + '">'mvArymvAry.length = ' <input name="calendarClear" type="button" id="calendarClear" value="

43、' + Calendar.language"clear"this.lang + '" style="border: 1px solid ' + calendar.colors"input_border" + 'background-color:' + calendar.colors"input_bg" + 'width:40px;height:20px;font-size:12px;cursor:pointer;"/>'mvArymvAry.l

44、ength = ' <input name="calendarToday" type="button" id="calendarToday" value="'mvArymvAry.length = (calendar.DateMode = pickMode"day") ? Calendar.language"today"this.lang : Calendar.language"pickTxt"this.lang;mvArymvAry.leng

45、th = '" style="border: 1px solid ' + calendar.colors"input_border" + 'background-color:' + calendar.colors"input_bg" + 'width:60px;height:20px;font-size:12px;cursor:pointer"/>'mvArymvAry.length = ' <input name="calendarClose&q

46、uot; type="button" id="calendarClose" value="' + Calendar.language"close"this.lang + '" style="border: 1px solid ' + calendar.colors"input_border" + 'background-color:' + calendar.colors"input_bg" + 'width:40px;

47、height:20px;font-size:12px;cursor:pointer"/>'mvArymvAry.length = ' </div>'mvArymvAry.length = ' </div>'this.panel.innerHTML = mvAry.join("");var obj = this.getElementById("prevMonth");obj.onclick = function () calendar.goPrevMonth(calendar)

48、;obj.onblur = function () calendar.onblur();this.prevMonth= obj;obj = this.getElementById("nextMonth");obj.onclick = function () calendar.goNextMonth(calendar);obj.onblur = function () calendar.onblur();this.nextMonth= obj;obj = this.getElementById("calendarClear");obj.onclick =

49、function () calendar.ReturnDate(""); /*calendar.dateControl.value = ""calendar.hide();*/this.calendarClear = obj;obj = this.getElementById("calendarClose");obj.onclick = function () calendar.hide();this.calendarClose = obj;obj = this.getElementById("calendarYear&qu

50、ot;);obj.onchange = function () calendar.update(calendar);obj.onblur = function () calendar.onblur();this.calendarYear = obj;obj = this.getElementById("calendarMonth");with(obj)onchange = function () calendar.update(calendar);onblur = function () calendar.onblur();this.calendarMonth = obj;

51、obj = this.getElementById("calendarHour");obj.onchange = function () calendar.hour = this.optionsthis.selectedIndex.value;obj.onblur = function () calendar.onblur();this.calendarHour = obj;obj = this.getElementById("calendarMinute");obj.onchange = function () calendar.minute = th

52、is.optionsthis.selectedIndex.value;obj.onblur = function () calendar.onblur();this.calendarMinute = obj;obj = this.getElementById("calendarSecond");obj.onchange = function () calendar.second = this.optionsthis.selectedIndex.value;obj.onblur = function () calendar.onblur();this.calendarSeco

53、nd = obj;obj = this.getElementById("calendarToday");obj.onclick = function () var today = (calendar.DateMode != pickMode"day") ?new Date(calendar.year,calendar.month,calendar.day,calendar.hour,calendar.minute,calendar.second): new Date();calendar.ReturnDate(today.format(calendar.

54、dateFormatStyle);this.calendarToday = obj;/年份下拉框绑定数据Ctotype.bindYear = function() var cy = this.calendarYear;cy.length = 0;for (var i = this.beginYear; i <= this.endYear; i+)cy.optionscy.length = new Option(i + Calendar.language"year"this.lang, i);/月份下拉框绑定数据Ctotype

55、.bindMonth = function() var cm = this.calendarMonth;cm.length = 0;for (var i = 0; i < 12; i+)cm.optionscm.length = new Option(Calendar.language"months"this.langi, i);/小时下拉框绑定数据Ctotype.bindHour = function() var ch = this.calendarHour;if(ch.length > 0)return;/不需要重新绑定，提高性能/ch

56、.length = 0;var h;for (var i = 0; i < 24; i+)h = ("00" + i +"").substr("" + i).length);ch.optionsch.length = new Option(h, h);/分钟下拉框绑定数据Ctotype.bindMinute = function() var cM = this.calendarMinute;if(cM.length > 0)return;/不需要重新绑定，提高性能/cM.length = 0;var

57、M;for (var i = 0; i < 60; i+)M = ("00" + i +"").substr("" + i).length);cM.optionscM.length = new Option(M, M);/秒钟下拉框绑定数据Ctotype.bindSecond = function() var cs = this.calendarSecond;if(cs.length > 0)return;/不需要重新绑定，提高性能/cs.length = 0;var s;for (var i = 0

58、; i < 60; i+)s = ("00" + i +"").substr("" + i).length);cs.optionscs.length = new Option(s, s);/向前一月Ctotype.goPrevMonth = function(e)if (this.year = this.beginYear && this.month = 0)return;this.month-;if (this.month = -1) this.year-;this.month = 11;

59、this.date = new Date(this.year, this.month, 1);this.changeSelect();this.bindData();/向后一月Ctotype.goNextMonth = function(e)if (this.year = this.endYear && this.month = 11)return;this.month+;if (this.month = 12) this.year+;this.month = 0;this.date = new Date(this.year, this.month, 1)

60、;this.changeSelect();this.bindData();/改变SELECT选中状态Ctotype.changeSelect = function() var cy = this.calendarYear;var cm = this.calendarMonth;var ch = this.calendarHour;var cM = this.calendarMinute;var cs = this.calendarSecond;/减少运算次数cythis.date.getFullYear()-this.beginYear.selected = true;c

61、mthis.date.getMonth().selected =true;/初始化时间的值chthis.hour.selected =true;cMthis.minute.selected =true;csthis.second.selected =true;/更新年、月Ctotype.update = function (e)this.year = e.calendarYear.optionse.calendarYear.selectedIndex.value;this.month = e.calendarMonth.optionse.calendarMonth.sel

62、ectedIndex.value;this.date = new Date(this.year, this.month, 1);/this.changeSelect();this.bindData();/绑定数据到月视图Ctotype.bindData = function () var calendar = this; if(calendar.DateMode >= pickMode"month")return;/2008-01-29/ var dateArray = this.getMonthViewArray(this.date.getYe

63、ar(), this.date.getMonth();/在Firefox 下年份错误var dateArray = this.getMonthViewArray(this.date.getFullYear(), this.date.getMonth();var tds = this.getElementById("calendarTable").getElementsByTagName("td");for(var i = 0; i < tds.length; i+) tdsi.style.backgroundColor = calendar.col

64、ors"td_bg_out"tdsi.onclick = function () return;tdsi.onmouseover = function () return;tdsi.onmouseout = function () return;if (i > dateArray.length - 1) break;tdsi.innerHTML = dateArrayi;if (dateArrayi != "&nbsp;")tdsi.bgColorTxt = "td_bg_out" /保存背景色的classvar cur

65、 = new Date();tdsi.isToday = false;if (cur.getFullYear() = calendar.date.getFullYear() && cur.getMonth() = calendar.date.getMonth() && cur.getDate() = dateArrayi) /是今天的单元格tdsi.style.backgroundColor = calendar.colors"cur_bg"tdsi.bgColorTxt = "cur_bg"tdsi.isToday = true;if(calendar.dateControl != null )cur = calendar.dateControl.value.toDate(calendar.dateFormatStyle);if (cur.getFullYear() = calendar.date.getFullYear() && cur.getMonth() = calendar.date.getMonth()&& cur