在网上复制的,修改了一下兼容性,可以兼容谷歌、火狐、苹果、欧朋、IE所有版本
1. [代码][JavaScript]代码
001 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > |
002 | <html xmlns= "http://www.w3.org/1999/xhtml" > |
004 | <title> new document </title> |
005 | <meta name= "generator" content= "editplus" /> |
006 | <meta name= "author" content= "" /> |
007 | <meta name= "keywords" content= "" /> |
008 | <meta name= "description" content= "" /> |
009 | <style type= "text/css" > |
012 | #logCalendar{width:950px;border-top:1px solid #ccc;border-left:1px solid #ccc} |
015 | border-right:1px solid #ccc;border-bottom:1px solid #ccc; |
016 | padding-left:5px;text-align:center; |
017 | height:22px;line-height:22px; |
019 | #daysList{border-top:1px solid #ccc;border-left:1px solid #ccc} |
021 | #daysList td{text-align:center;height:22px} |
024 | .bd{border:0;text-align:center;color: #00f} |
027 | color: #00f;font-weight:normal; |
028 | padding:3px;cursor:pointer; |
029 | text-decoration:underline |
032 | .selectDay{color: #fff;font-weight:bold;background:#FEB0B0;padding:1px;text-decoration:none;cursor:normal} |
036 | .test{color: #f00;text-decoration:none} |
038 | <script type= "text/javascript" > |
041 | var logDateControl = ( function () { |
043 | var styleData = [], dataStyle = {}; |
045 | var $ = function (id) { return document.getElementById(id) } |
047 | var isIE = isIE || ( function () { |
048 | var browser = function (str) { return navigator.userAgent.indexOf(str) > -1 } |
049 | return browser( "MSIE" ) && browser( "compatible" ) && !browser( "Opera" ); |
054 | HTMLElement.prototype.__defineSetter__( "innerText" , function (sText) { this .textContent = sText }); |
055 | HTMLElement.prototype.__defineGetter__( "innerText" , function () { return this .textContent }) |
058 | var doClickEvent = function (obj) { |
060 | if (isIE) { return obj.click() } |
061 | var e = document.createEvent( "MouseEvents" ); |
062 | e.initEvent( "click" , true , true ); |
063 | obj.dispatchEvent(e); |
066 | var attachEvent = function (evt, handler, obj) { |
068 | if (obj.addEventListener) { |
069 | obj.addEventListener(evt, handler, false ); |
071 | obj.attachEvent( "on" + evt, handler); |
075 | var calWeek = function (dt) { |
076 | var calDay = dt || new Date(); |
077 | var firstDay = new Date(calDay.getFullYear(), 0, 1); |
079 | var daysAll = Math.floor((calDay - firstDay) / 1000 / 60 / 60 / 24) + 1; |
081 | var firstDayWeekday = firstDay.getDay(); |
083 | var diffDay = firstDayWeekday == 0 ? 6 : firstDayWeekday - 1; |
084 | daysAll = daysAll + diffDay; |
085 | return Math.ceil(daysAll / 7); |
088 | var getDaysLen = function (year, month) { |
089 | if (!(/^\d{4}$/.test(year) && /^\d{1,2}$/.test(month))) { return -1 } |
090 | var monthDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31] |
092 | if (month == 1 && new Date(year, 1, 29).getMonth() == 1) { monthDays[1] = 29 } |
093 | return monthDays[month] |
096 | var displayDayList = function (year, month, pos) { |
098 | var cells1 = $(pos).rows[0].cells; |
099 | var cells2 = $(pos).rows[1].cells; |
100 | var daysArr = [ "日" , "一" , "二" , "三" , "四" , "五" , "六" ]; |
102 | for ( var i = 1, l = getDaysLen(year, --month) + 1; i < l; i++) { |
103 | var wd = new Date(year, month, i).getDay(); |
104 | cells1[i - 1].className = "" ; |
105 | if (wd == 0 || wd == 6) { cells1[i - 1].className = "weekEnd" ; } |
107 | cells1[i - 1].innerHTML = daysArr[wd]; |
108 | cells2[i - 1].className = "unSelectDay" ; |
109 | cells2[i - 1].setAttribute( "_oldCls" , "unSelectDay" ); |
110 | cells2[i - 1].innerHTML = i > 9 ? i : "0" + i; |
112 | var dtStr = year + "|" + (month + 1) + "|" + i; |
113 | if (( "," + styleData.join() + "," ).indexOf( "," + dtStr + "," ) > -1) { |
114 | cells2[i - 1].className = "unSelectDay " + dataStyle[dtStr]; |
115 | cells2[i - 1].setAttribute( "_oldCls" , "unSelectDay " + dataStyle[dtStr]); |
119 | if ( new Date().getMonth() == month) { |
120 | curSelEl = cells2[ new Date().getDate() - 1]; |
121 | curSelEl.className = "selectDay" ; |
123 | for ( var j = i - 1; j < 31; j++) { |
124 | cells1[j].className = cells2[j].className = "" ; |
125 | cells1[j].innerHTML = cells2[j].innerHTML = " " ; |
127 | $(pos).onclick = function (e) { changeInfo(e) } |
130 | var changeInfo = function (e) { |
132 | var el = e.target || e.srcElement || e; |
133 | var day = el.innerText; |
135 | if (!/^\d{1,2}$/.test(day)) return ; |
137 | if (curSelEl) { curSelEl.className = curSelEl.getAttribute( "_oldCls" ) } |
140 | el.className = "selectDay" ; |
141 | var dt = new Date($( "year" ).value, $( "month" ).value - 1, day); |
143 | $( "day" ).value = day; |
145 | $( "weekday" ).value = [ "日" , "一" , "二" , "三" , "四" , "五" , "六" ][dt.getDay()]; |
146 | $( "week" ).value = calWeek(dt); |
150 | var listenKey = function (e) { |
151 | var keyCode = (e || event).keyCode; |
152 | var p = curSelEl.parentNode.cells; |
154 | if (keyCode == "37" ) { |
155 | cellIndex = curSelEl.cellIndex != 0 ? curSelEl.cellIndex : p.length; |
156 | doClickEvent(p[cellIndex - 1]) |
158 | if (keyCode == "39" ) { |
159 | cellIndex = curSelEl.cellIndex != (p.length - 1) ? curSelEl.cellIndex : -1; |
160 | doClickEvent(p[cellIndex + 1]) |
164 | if (window.attachEvent) { |
165 | window.attachEvent( "onload" , docInit); |
167 | window.addEventListener( "load" , docInit, false ); |
170 | var curDate = new Date(), curYear = curDate.getFullYear(); |
172 | for ( var i = -10; i < 10; i++) { $( "year" ).add( new Option(curYear + i, curYear + i)) } |
173 | $( "year" ).selectedIndex = 10; |
174 | $( "month" ).selectedIndex = curDate.getMonth(); |
175 | $( "day" ).value = curDate.getDate(); |
177 | $( "weekday" ).value = [ "日" , "一" , "二" , "三" , "四" , "五" , "六" ][curDate.getDay()]; |
178 | $( "week" ).value = calWeek(); |
180 | $( "year" ).onchange = $( "month" ).onchange = function () { displayDayList($( "year" ).value, $( "month" ).value, "daysList" ) }; |
182 | displayDayList(curDate.getFullYear(), curDate.getMonth() + 1, "daysList" ); |
188 | var setDateStyle = function (dateArr, style) { |
189 | if ( typeof dateArr != "object" ) return ; |
190 | if (dateArr instanceof Array) { |
191 | if (dateArr[0] instanceof Array) { |
192 | for ( var i = 0; i < dateArr.length; i++) setDateStyle(dateArr[i], style); |
194 | var dataStr = dateArr.join( "|" ); |
195 | styleData.push(dataStr); |
196 | dataStyle[dataStr] = style; |
201 | return { setDateStyle: setDateStyle } |
204 | logDateControl.setDateStyle([[2007, 12, 15], [2007, 11, 12]], "test" ); |
209 | <table cellpadding= "3" cellspacing= "0" id= "logCalendar" > |
211 | <td>第<input type= "text" name= "week" class= "bd" id= "week" readonly size= "2" >周</td> |
212 | <td>星期<input type= "text" name= "weekday" class= "bd" id= "weekday" readonly size= "2" ></td> |
213 | <td rowspan= "2" style= "padding:0" > |
214 | <table width= "100%" cellpadding= "3" height= "100%" cellspacing= "0" id= "daysList" > |
216 | <td></td><td></td><td></td><td></td><td></td> |
217 | <td></td><td></td><td></td><td></td><td></td> |
218 | <td></td><td></td><td></td><td></td><td></td> |
219 | <td></td><td></td><td></td><td></td><td></td> |
220 | <td></td><td></td><td></td><td></td><td></td> |
221 | <td></td><td></td><td></td><td></td><td></td><td></td> |
224 | <td></td><td></td><td></td><td></td><td></td> |
225 | <td></td><td></td><td></td><td></td><td></td> |
226 | <td></td><td></td><td></td><td></td><td></td> |
227 | <td></td><td></td><td></td><td></td><td></td> |
228 | <td></td><td></td><td></td><td></td><td></td> |
229 | <td></td><td></td><td></td><td></td><td></td><td></td> |
235 | <td><select name= "year" id= "year" ></select>年 <select name= "month" id= "month" > |
236 | <option value= "1" >1</option> |
237 | <option value= "2" >2</option> |
238 | <option value= "3" >3</option> |
239 | <option value= "4" >4</option> |
240 | <option value= "5" >5</option> |
241 | <option value= "6" >6</option> |
242 | <option value= "7" >7</option> |
243 | <option value= "8" >8</option> |
244 | <option value= "9" >9</option> |
245 | <option value= "10" >10</option> |
246 | <option value= "11" >11</option> |
247 | <option value= "12" >12</option> |
249 | <td>日期<input type= "text" name= "day" size= "2" class= "bd" id= "day" id= "day" ></td> |
255 | 在IE 6.0 中会出现有些td没有边框的情况,在其中敲上一个空格符,就可以了 |
2. [图片] QQ截图20130530162225.png