JS日历控件 (兼容IE firefox) 可选择时间
js代码如下:
View Code
1 <!-- 2 var cal; 3 var isFocus=false; //是否为焦点 4 var pickMode ={ 5 "second":1, 6 "minute":2, 7 "hour":3, 8 "day":4, 9 "month":5, 10 "year":6 }; 11 12 var topY=0,leftX=0; //自定义定位偏移量 2007-02-11 由 寒羽枫添加 13 //选择日期 → 由 寒羽枫 2007-06-10 添加，通过 ID 来选日期 14 function SelectDateById(id,strFormat,x,y) 15 { 16 var obj = document.getElementById(id); 17 if(obj == null){return false;} 18 obj.focus(); 19 if(obj.onclick != null){obj.onclick();} 20 else if(obj.click != null){obj.click();} 21 else{SelectDate(obj,strFormat,x,y)} 22 } 23 24 //选择日期 → 由 寒羽枫 2006-06-25 添加 25 function SelectDate(obj,strFormat,x,y) 26 { 27 28 leftX =(x == null) ? leftX : x; 29 topY =(y == null) ? topY : y;//自定义定位偏移量 2007-02-11 由 寒羽枫添加 30 if(document.getElementById("ContainerPanel")==null){InitContainerPanel();} 31 var date = new Date(); 32 var by = date.getFullYear()-50; //最小值 → 50 年前 33 var ey = date.getFullYear()+50; //最大值 → 50 年后 34 //cal = new Calendar(by, ey,1,strFormat); //初始化英文版，0 为中文版 35 cal = (cal==null) ? new Calendar(by, ey, 0) : cal; //不用每次都初始化 2006-12-03 修正 36 cal.DateMode =pickMode["second"]; //复位 37 if(strFormat.indexOf('s')< 0) {cal.DateMode =pickMode["minute"];}//精度为分 38 if(strFormat.indexOf('m')< 0) {cal.DateMode =pickMode["hour"];}//精度为时 39 if(strFormat.indexOf('h')< 0) {cal.DateMode =pickMode["day"];}//精度为日 40 if(strFormat.indexOf('d')< 0) {cal.DateMode =pickMode["month"];}//精度为月 41 if(strFormat.indexOf('M')< 0) {cal.DateMode =pickMode["year"];}//精度为年 42 if(strFormat.indexOf('y')< 0) {cal.DateMode =pickMode["second"];}//默认精度为秒 43 cal.dateFormatStyleOld = cal.dateFormatStyle; 44 cal.dateFormatStyle = strFormat; 45 cal.show(obj); 46 } 47 /**//**//**//**//**//**//**//** 48 * 返回日期 49 * @param d the delimiter 50 * @param p the pattern of your date 51 2006-06-25 由 寒羽枫 修改为根据用户指定的 style 来确定； 52 */ 53 String.prototype.toDate = function(style) { 54 var y = this.substring(style.indexOf('y'),style.lastIndexOf('y')+1);//年 55 var M = this.substring(style.indexOf('M'),style.lastIndexOf('M')+1);//月 56 var d = this.substring(style.indexOf('d'),style.lastIndexOf('d')+1);//日 57 var h = this.substring(style.indexOf('h'),style.lastIndexOf('h')+1);//时 58 var m = this.substring(style.indexOf('m'),style.lastIndexOf('m')+1);//分 59 var s = this.substring(style.indexOf('s'),style.lastIndexOf('s')+1);//秒 60 61 if(s == null ||s == "" || isNaN(s)) {s = new Date().getSeconds();} 62 if(m == null ||m == "" || isNaN(m)) {m = new Date().getMinutes();} 63 if(h == null ||h == "" || isNaN(h)) {h = new Date().getHours();} 64 if(d == null ||d == "" || isNaN(d)) {d = new Date().getDate();} 65 if(M == null ||M == "" || isNaN(M)) {M = new Date().getMonth()+1;} 66 if(y == null ||y == "" || isNaN(y)) {y = new Date().getFullYear();} 67 var dt ; 68 eval ("dt = new Date('"+ y+"', '"+(M-1)+"','"+ d+"','"+ h+"','"+ m+"','"+ s +"')"); 69 return dt; 70 } 71 72 /**//**//**//**//**//**//**//** 73 * 格式化日期 74 * @param d the delimiter 75 * @param p the pattern of your date 76 * @author meizz 77 */ 78 Date.prototype.format = function(style) { 79 var o = { 80 "M+" : this.getMonth() + 1, //month 81 "d+" : this.getDate(), //day 82 "h+" : this.getHours(), //hour 83 "m+" : this.getMinutes(), //minute 84 "s+" : this.getSeconds(), //second 85 "w+" : "天一二三四五六".charAt(this.getDay()), //week 86 "q+" : Math.floor((this.getMonth() + 3) / 3), //quarter 87 "S" : this.getMilliseconds() //millisecond 88 } 89 if(/(y+)/.test(style)) { 90 style = style.replace(RegExp.$1, 91 (this.getFullYear() + "").substr(4 - RegExp.$1.length)); 92 } 93 for(var k in o){ 94 if(new RegExp("("+ k +")").test(style)){ 95 style = style.replace(RegExp.$1, 96 RegExp.$1.length == 1 ? o[k] : 97 ("00" + o[k]).substr(("" + o[k]).length)); 98 } 99 } 100 return style; 101 } 102 103 //2007-09-14 由寒羽枫添加返回所选日期 104 Calendar.prototype.ReturnDate = function(dt) { 105 if (this.dateControl != null){this.dateControl.value = dt;} 106 calendar.hide(); 107 if(this.dateControl.onchange == null){return;} 108 //将 onchange 转成其它函数，以免触发验证事件 109 var ev = this.dateControl.onchange.toString(); //找出函数的字串 110 ev = ev.substring( 111 ((ev.indexOf("ValidatorOnChange();")> 0) ? ev.indexOf("ValidatorOnChange();") + 20 : ev.indexOf("{") + 1) 112 , ev.lastIndexOf("}"));//去除验证函数 ValidatorOnChange(); 113 var fun = new Function(ev); //重新定义函数 114 this.dateControl.changeEvent = fun; 115 this.dateControl.changeEvent();//触发自定义 changeEvent 函数 116 } 117 118 /**//**//**//**//**//**//**//** 119 * 日历类 120 * @param beginYear 1990 121 * @param endYear 2010 122 * @param lang 0(中文)|1(英语) 可自由扩充 123 * @param dateFormatStyle "yyyy-MM-dd"; 124 * @version 2006-04-01 125 * @author KimSoft (jinqinghua [at] gmail.com) 126 * @update 127 */ 128 function Calendar(beginYear, endYear, lang, dateFormatStyle) { 129 this.beginYear = 1950; 130 this.endYear = 2050; 131 this.lang = 0; //0(中文) | 1(英文) 132 this.dateFormatStyle = "yyyy-MM-dd hh:mm:ss"; 133 134 if (beginYear != null && endYear != null){ 135 this.beginYear = beginYear; 136 this.endYear = endYear; 137 } 138 if (lang != null){ 139 this.lang = lang 140 } 141 142 if (dateFormatStyle != null){ 143 this.dateFormatStyle = dateFormatStyle 144 } 145 146 this.dateControl = null; 147 this.panel = this.getElementById("calendarPanel"); 148 this.container = this.getElementById("ContainerPanel"); 149 this.form = null; 150 151 this.date = new Date(); 152 this.year = this.date.getFullYear(); 153 this.month = this.date.getMonth(); 154 155 this.day = this.date.getDate(); 156 this.hour = this.date.getHours(); 157 this.minute = this.date.getMinutes(); 158 this.second = this.date.getSeconds(); 159 160 this.colors = { 161 "cur_word" : "#FFFFFF", //当日日期文字颜色 162 "cur_bg" : "#00FF00", //当日日期单元格背影色 163 "sel_bg" : "#FFCCCC", //已被选择的日期单元格背影色 2006-12-03 寒羽枫添加 164 "sun_word" : "#FF0000", //星期天文字颜色 165 "sat_word" : "#0000FF", //星期六文字颜色 166 "td_word_light" : "#333333", //单元格文字颜色 167 "td_word_dark" : "#CCCCCC", //单元格文字暗色 168 "td_bg_out" : "#EFEFEF", //单元格背影色 169 "td_bg_over" : "#FFCC00", //单元格背影色 170 "tr_word" : "#FFFFFF", //日历头文字颜色 171 "tr_bg" : "#666666", //日历头背影色 172 "input_border" : "#CCCCCC", //input控件的边框颜色 173 "input_bg" : "#EFEFEF" //input控件的背影色 174 } 175 /* //2008-01-29 放到了 show ，因为要做 pickMode 判断 176 this.draw(); 177 this.bindYear(); 178 this.bindMonth(); 179 */ 180 //this.changeSelect(); 181 //this.bindData(); //2006-12-30 由民工.砖家注释 182 } 183 184 /**//**//**//**//**//**//**//** 185 * 日历类属性（语言包，可自由扩展） 186 */ 187 Calendar.language = { 188 "year" : [[""], [""]], 189 "months" : [["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"], 190 ["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"] 191 ], 192 "weeks" : [["日","一","二","三","四","五","六"], 193 ["SUN","MON","TUR","WED","THU","FRI","SAT"] 194 ], 195 "hour" : [["时"], ["H"]], 196 "minute" : [["分"], ["M"]], 197 "second" : [["秒"], ["S"]], 198 "clear" : [["清空"], ["CLS"]], 199 "today" : [["今天"], ["TODAY"]], 200 "pickTxt" : [["确定"], ["OK"]],//pickMode 精确到年、月时把今天变成“确定” 201 "close" : [["关闭"], ["CLOSE"]] 202 } 203 204 Calendar.prototype.draw = function() { 205 calendar = this; 206 207 var mvAry = []; 208 //mvAry[mvAry.length] = ' <form name="calendarForm" style="margin: 0px;">'; //因 <form> 不能嵌套， 2006-12-01 由寒羽枫改用 Div 209 mvAry[mvAry.length] = ' <div name="calendarForm" style="margin: 0px;">'; 210 mvAry[mvAry.length] = ' <table width="100%" border="0" cellpadding="0" cellspacing="1" style="font-size:12px;">'; 211 mvAry[mvAry.length] = ' <tr>'; 212 mvAry[mvAry.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;'; 213 if(calendar.DateMode > pickMode["month"]){mvAry[mvAry.length] = 'display:none;';}//pickMode 精确到年时隐藏“月” 214 mvAry[mvAry.length] ='" name="prevMonth" type="button" id="prevMonth" value="<" /></th>'; 215 mvAry[mvAry.length] = ' <th align="center" width="98%" nowrap="nowrap"><select name="calendarYear" id="calendarYear" style="font-size:12px;"></select><select name="calendarMonth" id="calendarMonth" style="font-size:12px;'; 216 if(calendar.DateMode > pickMode["month"]){mvAry[mvAry.length] = 'display:none;';}//pickMode 精确到年时隐藏“月” 217 mvAry[mvAry.length] = '"></select></th>'; 218 mvAry[mvAry.length] = ' <th align="right" width="1%"><input style="border: 1px solid ' + calendar.colors["input_border"] + ';background-color:' + calendar.colors["input_bg"] + ';width:16px;height:20px;'; 219 if(calendar.DateMode > pickMode["month"]){mvAry[mvAry.length] = 'display:none;';}//pickMode 精确到年时隐藏“月” 220 mvAry[mvAry.length] ='" name="nextMonth" type="button" id="nextMonth" value=">" /></th>'; 221 mvAry[mvAry.length] = ' </tr>'; 222 mvAry[mvAry.length] = ' </table>'; 223 mvAry[mvAry.length] = ' <table id="calendarTable" width="100%" style="border:0px solid #CCCCCC;background-color:#FFFFFF;font-size:12px;'; 224 if(calendar.DateMode >= pickMode["month"]){mvAry[mvAry.length] = 'display:none;';}//pickMode 精确到年、月时隐藏“天” 225 mvAry[mvAry.length] = '" border="0" cellpadding="3" cellspacing="1">'; 226 mvAry[mvAry.length] = ' <tr>'; 227 for(var i = 0; i < 7; i++) { 228 mvAry[mvAry.length] = ' <th style="font-weight:normal;background-color:' + calendar.colors["tr_bg"] + ';color:' + calendar.colors["tr_word"] + ';">' + Calendar.language["weeks"][this.lang][i] + '</th>'; 229 } 230 mvAry[mvAry.length] = ' </tr>'; 231 for(var i = 0; i < 6;i++){ 232 mvAry[mvAry.length] = ' <tr align="center">'; 233 for(var j = 0; j < 7; j++) { 234 if (j == 0){ 235 mvAry[mvAry.length] = ' <td style="cursor:default;color:' + calendar.colors["sun_word"] + ';"></td>'; 236 } else if(j == 6) { 237 mvAry[mvAry.length] = ' <td style="cursor:default;color:' + calendar.colors["sat_word"] + ';"></td>'; 238 } else { 239 mvAry[mvAry.length] = ' <td style="cursor:default;"></td>'; 240 } 241 } 242 mvAry[mvAry.length] = ' </tr>'; 243 } 244 245 //2009-03-03 添加的代码，放置时间的行 246 mvAry[mvAry.length] = ' <tr style="'; 247 if(calendar.DateMode >= pickMode["day"]){mvAry[mvAry.length] = 'display:none;';}//pickMode 精确到时日隐藏“时间” 248 mvAry[mvAry.length] = '"><td align="center" colspan="7">'; 249 mvAry[mvAry.length] = ' <select name="calendarHour" id="calendarHour" style="font-size:12px;"></select>' + Calendar.language["hour"][this.lang]; 250 mvAry[mvAry.length] = '<span style="' 251 if(calendar.DateMode >= pickMode["hour"]){mvAry[mvAry.length] = 'display:none;';}//pickMode 精确到小时时隐藏“分” 252 mvAry[mvAry.length] = '"><select name="calendarMinute" id="calendarMinute" style="font-size:12px;"></select>' + Calendar.language["minute"][this.lang]+'</span>'; 253 mvAry[mvAry.length] = '<span style="' 254 if(calendar.DateMode >= pickMode["minute"]){mvAry[mvAry.length] = 'display:none;';}//pickMode 精确到小时、分时隐藏“秒” 255 mvAry[mvAry.length] = '"><select name="calendarSecond" id="calendarSecond" style="font-size:12px;"></select>'+ Calendar.language["second"][this.lang]+'</span>'; 256 mvAry[mvAry.length] = ' </td></tr>'; 257 258 mvAry[mvAry.length] = ' </table>'; 259 //mvAry[mvAry.length] = ' </from>'; 260 mvAry[mvAry.length] = ' <div align="center" style="padding:4px 4px 4px 4px;background-color:' + calendar.colors["input_bg"] + ';">'; 261 mvAry[mvAry.length] = ' <input name="calendarClear" type="button" id="calendarClear" value="' + 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;"/>'; 262 mvAry[mvAry.length] = ' <input name="calendarToday" type="button" id="calendarToday" value="' 263 mvAry[mvAry.length] = (calendar.DateMode == pickMode["day"]) ? Calendar.language["today"][this.lang] : Calendar.language["pickTxt"][this.lang]; 264 mvAry[mvAry.length] = '" style="border: 1px solid ' + calendar.colors["input_border"] + ';background-color:' + calendar.colors["input_bg"] + ';width:60px;height:20px;font-size:12px;cursor:pointer"/>'; 265 mvAry[mvAry.length] = ' <input name="calendarClose" 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;height:20px;font-size:12px;cursor:pointer"/>'; 266 mvAry[mvAry.length] = ' </div>'; 267 268 mvAry[mvAry.length] = ' </div>'; 269 this.panel.innerHTML = mvAry.join(""); 270 271 /**//**//**//******** 以下代码由寒羽枫 2006-12-01 添加 **********/ 272 var obj = this.getElementById("prevMonth"); 273 obj.onclick = function () {calendar.goPrevMonth(calendar);} 274 obj.onblur = function () {calendar.onblur();} 275 this.prevMonth= obj; 276 277 obj = this.getElementById("nextMonth"); 278 obj.onclick = function () {calendar.goNextMonth(calendar);} 279 obj.onblur = function () {calendar.onblur();} 280 this.nextMonth= obj; 281 282 obj = this.getElementById("calendarClear"); 283 obj.onclick = function () 284 { calendar.ReturnDate(""); /*calendar.dateControl.value = "";calendar.hide();*///2007-09-14 由寒羽枫注释 285 } 286 this.calendarClear = obj; 287 288 obj = this.getElementById("calendarClose"); 289 obj.onclick = function () {calendar.hide();} 290 this.calendarClose = obj; 291 292 obj = this.getElementById("calendarYear"); 293 obj.onchange = function () {calendar.update(calendar);} 294 obj.onblur = function () {calendar.onblur();} 295 this.calendarYear = obj; 296 297 obj = this.getElementById("calendarMonth"); 298 with(obj) 299 { 300 onchange = function () {calendar.update(calendar);} 301 onblur = function () {calendar.onblur();} 302 }this.calendarMonth = obj; 303 304 obj = this.getElementById("calendarHour"); 305 obj.onchange = function () {calendar.hour = this.options[this.selectedIndex].value;} 306 obj.onblur = function () {calendar.onblur();} 307 this.calendarHour = obj; 308 309 obj = this.getElementById("calendarMinute"); 310 obj.onchange = function () {calendar.minute = this.options[this.selectedIndex].value;} 311 obj.onblur = function () {calendar.onblur();} 312 this.calendarMinute = obj; 313 314 obj = this.getElementById("calendarSecond"); 315 obj.onchange = function () {calendar.second = this.options[this.selectedIndex].value;} 316 obj.onblur = function () {calendar.onblur();} 317 this.calendarSecond = obj; 318 319 obj = this.getElementById("calendarToday"); 320 obj.onclick = function () { 321 var today = (calendar.DateMode != pickMode["day"]) ? 322 new Date(calendar.year,calendar.month,calendar.day,calendar.hour,calendar.minute,calendar.second) 323 : new Date();//2008-01-29 324 calendar.ReturnDate(today.format(calendar.dateFormatStyle)); 325 } 326 this.calendarToday = obj; 327 } 328 329 //年份下拉框绑定数据 330 Calendar.prototype.bindYear = function() { 331 var cy = this.calendarYear;//2006-12-01 由寒羽枫修改 332 cy.length = 0; 333 for (var i = this.beginYear; i <= this.endYear; i++){ 334 cy.options[cy.length] = new Option(i + Calendar.language["year"][this.lang], i); 335 } 336 } 337 338 //月份下拉框绑定数据 339 Calendar.prototype.bindMonth = function() { 340 var cm = this.calendarMonth;//2006-12-01 由寒羽枫修改 341 cm.length = 0; 342 for (var i = 0; i < 12; i++){ 343 cm.options[cm.length] = new Option(Calendar.language["months"][this.lang][i], i); 344 } 345 } 346 347 //小时下拉框绑定数据 348 Calendar.prototype.bindHour = function() { 349 var ch = this.calendarHour; 350 if(ch.length > 0){return;}//2009-03-03 不需要重新绑定，提高性能 351 //ch.length = 0; 352 var h; 353 for (var i = 0; i < 24; i++){ 354 h = ("00" + i +"").substr(("" + i).length); 355 ch.options[ch.length] = new Option(h, h); 356 } 357 } 358 359 //分钟下拉框绑定数据 360 Calendar.prototype.bindMinute = function() { 361 var cM = this.calendarMinute; 362 if(cM.length > 0){return;}//2009-03-03 不需要重新绑定，提高性能 363 //cM.length = 0; 364 var M; 365 for (var i = 0; i < 60; i++){ 366 M = ("00" + i +"").substr(("" + i).length); 367 cM.options[cM.length] = new Option(M, M); 368 } 369 } 370 371 //秒钟下拉框绑定数据 372 Calendar.prototype.bindSecond = function() { 373 var cs = this.calendarSecond; 374 if(cs.length > 0){return;}//2009-03-03 不需要重新绑定，提高性能 375 //cs.length = 0; 376 var s; 377 for (var i = 0; i < 60; i++){ 378 s = ("00" + i +"").substr(("" + i).length); 379 cs.options[cs.length] = new Option(s, s); 380 } 381 } 382 383 //向前一月 384 Calendar.prototype.goPrevMonth = function(e){ 385 if (this.year == this.beginYear && this.month == 0){return;} 386 this.month--; 387 if (this.month == -1) { 388 this.year--; 389 this.month = 11; 390 } 391 this.date = new Date(this.year, this.month, 1); 392 this.changeSelect(); 393 this.bindData(); 394 } 395 396 //向后一月 397 Calendar.prototype.goNextMonth = function(e){ 398 if (this.year == this.endYear && this.month == 11){return;} 399 this.month++; 400 if (this.month == 12) { 401 this.year++; 402 this.month = 0; 403 } 404 this.date = new Date(this.year, this.month, 1); 405 this.changeSelect(); 406 this.bindData(); 407 } 408 409 //改变SELECT选中状态 410 Calendar.prototype.changeSelect = function() { 411 var cy = this.calendarYear;//2006-12-01 由寒羽枫修改 412 var cm = this.calendarMonth; 413 var ch = this.calendarHour; 414 var cM = this.calendarMinute; 415 var cs = this.calendarSecond; 416 //2006-12-30 由民工.砖家修改，减少运算次数 417 cy[this.date.getFullYear()-this.beginYear].selected = true; 418 cm[this.date.getMonth()].selected =true; 419 420 //2009-03-03 添加，初始化时间的值 421 ch[this.hour].selected =true; 422 cM[this.minute].selected =true; 423 cs[this.second].selected =true; 424 } 425 426 //更新年、月 427 Calendar.prototype.update = function (e){ 428 this.year = e.calendarYear.options[e.calendarYear.selectedIndex].value;//2006-12-01 由寒羽枫修改 429 this.month = e.calendarMonth.options[e.calendarMonth.selectedIndex].value; 430 this.date = new Date(this.year, this.month, 1); 431 //this.changeSelect(); 432 this.bindData(); 433 } 434 435 //绑定数据到月视图 436 Calendar.prototype.bindData = function () { 437 var calendar = this; 438 if(calendar.DateMode >= pickMode["month"]){return;}//2008-01-29 439 // var dateArray = this.getMonthViewArray(this.date.getYear(), this.date.getMonth()); 440 //2006-12-30 由民工.砖家修改 在Firefox 下年份错误 441 var dateArray = this.getMonthViewArray(this.date.getFullYear(), this.date.getMonth()); 442 var tds = this.getElementById("calendarTable").getElementsByTagName("td"); 443 for(var i = 0; i < tds.length; i++) { 444 tds[i].style.backgroundColor = calendar.colors["td_bg_out"]; 445 tds[i].onclick = function () {return;} 446 tds[i].onmouseover = function () {return;} 447 tds[i].onmouseout = function () {return;} 448 if (i > dateArray.length - 1) break; 449 tds[i].innerHTML = dateArray[i]; 450 if (dateArray[i] != " "){ 451 tds[i].bgColorTxt = "td_bg_out"; //2009-03-03 保存背景色的class 452 var cur = new Date(); 453 tds[i].isToday = false; 454 if (cur.getFullYear() == calendar.date.getFullYear() && cur.getMonth() == calendar.date.getMonth() && cur.getDate() == dateArray[i]) { 455 //是今天的单元格 456 tds[i].style.backgroundColor = calendar.colors["cur_bg"]; 457 tds[i].bgColorTxt = "cur_bg"; 458 tds[i].isToday = true; 459 } 460 if(calendar.dateControl != null ) 461 { 462 cur = calendar.dateControl.value.toDate(calendar.dateFormatStyle); 463 if (cur.getFullYear() == calendar.date.getFullYear() && cur.getMonth() == calendar.date.getMonth()&& cur.getDate() == dateArray[i]) { 464 //是已被选中的单元格 465 calendar.selectedDayTD = tds[i]; 466 tds[i].style.backgroundColor = calendar.colors["sel_bg"]; 467 tds[i].bgColorTxt = "sel_bg"; 468 } 469 } 470 tds[i].onclick = function () { 471 if(calendar.DateMode == pickMode["day"]) //2009-03-03 当选择日期时，点击格子即返回值 472 { 473 calendar.ReturnDate(new Date(calendar.date.getFullYear(), 474 calendar.date.getMonth(), 475 this.innerHTML).format(calendar.dateFormatStyle)); 476 } 477 else 478 { 479 if(calendar.selectedDayTD != null) //2009-03-03 清除已选中的背景色 480 { 481 calendar.selectedDayTD.style.backgroundColor =(calendar.selectedDayTD.isToday)? calendar.colors["cur_bg"] : calendar.colors["td_bg_out"]; 482 } 483 this.style.backgroundColor = calendar.colors["sel_bg"]; 484 calendar.day = this.innerHTML; 485 calendar.selectedDayTD = this; //2009-03-03 记录已选中的日子 486 } 487 } 488 tds[i].style.cursor ="pointer"; //2007-08-06 由寒羽枫添加，鼠标变成手指状 489 tds[i].onmouseover = function () { 490 this.style.backgroundColor = calendar.colors["td_bg_over"]; 491 } 492 tds[i].onmouseout = function () { 493 if(calendar.selectedDayTD != this) { 494 this.style.backgroundColor = calendar.colors[this.bgColorTxt];} 495 } 496 tds[i].onblur = function () {calendar.onblur();} 497 } 498 } 499 } 500 501 //根据年、月得到月视图数据(数组形式) 502 Calendar.prototype.getMonthViewArray = function (y, m) { 503 var mvArray = []; 504 var dayOfFirstDay = new Date(y, m, 1).getDay(); 505 var daysOfMonth = new Date(y, m + 1, 0).getDate(); 506 for (var i = 0; i < 42; i++) { 507 mvArray[i] = " "; 508 } 509 for (var i = 0; i < daysOfMonth; i++){ 510 mvArray[i + dayOfFirstDay] = i + 1; 511 } 512 return mvArray; 513 } 514 515 //扩展 document.getElementById(id) 多浏览器兼容性 from meizz tree source 516 Calendar.prototype.getElementById = function(id){ 517 if (typeof(id) != "string" || id == "") return null; 518 if (document.getElementById) return document.getElementById(id); 519 if (document.all) return document.all(id); 520 try {return eval(id);} catch(e){ return null;} 521 } 522 523 //扩展 object.getElementsByTagName(tagName) 524 Calendar.prototype.getElementsByTagName = function(object, tagName){ 525 if (document.getElementsByTagName) return document.getElementsByTagName(tagName); 526 if (document.all) return document.all.tags(tagName); 527 } 528 529 //取得HTML控件绝对位置 530 Calendar.prototype.getAbsPoint = function (e){ 531 var x = e.offsetLeft; 532 var y = e.offsetTop; 533 while(e = e.offsetParent){ 534 x += e.offsetLeft; 535 y += e.offsetTop; 536 } 537 return {"x": x, "y": y}; 538 } 539 540 //显示日历 541 Calendar.prototype.show = function (dateObj, popControl) { 542 if (dateObj == null){ 543 throw new Error("arguments[0] is necessary") 544 } 545 this.dateControl = dateObj; 546 var now = new Date(); 547 this.date = (dateObj.value.length > 0) ? new Date(dateObj.value.toDate(this.dateFormatStyle)) : now.format(this.dateFormatStyle).toDate(this.dateFormatStyle) ;//2008-01-29 寒羽枫添加 → 若为空则根据dateFormatStyle初始化日期 548 549 if(this.panel.innerHTML==""||cal.dateFormatStyleOld != cal.dateFormatStyle)//2008-01-29 把构造表格放在此处，2009-03-03 若请示的样式改变，则重新初始化 550 { 551 this.draw(); 552 this.bindYear(); 553 this.bindMonth(); 554 this.bindHour(); 555 this.bindMinute(); 556 this.bindSecond(); 557 } 558 this.year = this.date.getFullYear(); 559 this.month = this.date.getMonth(); 560 this.day = this.date.getDate(); 561 this.hour = this.date.getHours(); 562 this.minute = this.date.getMinutes(); 563 this.second = this.date.getSeconds(); 564 this.changeSelect(); 565 this.bindData(); 566 567 if (popControl == null){ 568 popControl = dateObj; 569 } 570 var xy = this.getAbsPoint(popControl); 571 //this.panel.style.left = xy.x + "px"; 572 //this.panel.style.top = (xy.y + dateObj.offsetHeight) + "px"; 573 this.panel.style.left = (xy.x + leftX)+ "px"; //由寒羽枫 2007-02-11 修改 → 加入自定义偏移量 574 this.panel.style.top = (xy.y + topY + dateObj.offsetHeight) + "px"; 575 576 //由寒羽枫 2006-06-25 修改 → 把 visibility 变为 display，并添加失去焦点的事件 //this.setDisplayStyle("select", "hidden"); 577 //this.panel.style.visibility = "visible"; 578 //this.container.style.visibility = "visible"; 579 this.panel.style.display = ""; 580 this.container.style.display = ""; 581 582 if( !this.dateControl.isTransEvent) 583 { 584 this.dateControl.isTransEvent = true; 585 /* 已写在返回值的时候 ReturnDate 函数中，去除验证事件的函数 586 this.dateControl.changeEvent = this.dateControl.onchange;//将 onchange 转成其它函数，以免触发验证事件 587 this.dateControl.onchange = function() 588 {if(typeof(this.changeEvent) =='function'){this.changeEvent();}}*/ 589 if(this.dateControl.onblur != null){ 590 this.dateControl.blurEvent = this.dateControl.onblur;}//2007-09-14 保存主文本框的 onblur ，使其原本的事件不被覆盖 591 this.dateControl.onblur = function() 592 {calendar.onblur();if(typeof(this.blurEvent) =='function'){this.blurEvent();} 593 } 594 } 595 596 this.container.onmouseover = function(){isFocus=true;} 597 this.container.onmouseout = function(){isFocus=false;} 598 } 599 600 //隐藏日历 601 Calendar.prototype.hide = function() { 602 //this.setDisplayStyle("select", "visible"); 603 //this.panel.style.visibility = "hidden"; 604 //this.container.style.visibility = "hidden"; 605 this.panel.style.display = "none"; 606 this.container.style.display = "none"; 607 isFocus=false; 608 } 609 610 //焦点转移时隐藏日历 → 由寒羽枫 2006-06-25 添加 611 Calendar.prototype.onblur = function() { 612 if(!isFocus){this.hide();} 613 } 614 615 //以下由寒羽枫 2007-07-26 修改 → 确保日历容器节点在 body 最后，否则 FireFox 中不能出现在最上方 616 function InitContainerPanel() //初始化容器 617 { 618 var str = '<div id="calendarPanel" style="position: absolute;display: none;z-index:9999; background-color: #FFFFFF;border: 1px solid #CCCCCC;width:175px;font-size:12px;"></div>'; 619 if(document.all) 620 { 621 str += '<iframe style="position:absolute;z-index:2000;width:expression(this.previousSibling.offsetWidth);'; 622 str += 'height:expression(this.previousSibling.offsetHeight);'; 623 str += 'left:expression(this.previousSibling.offsetLeft);top:expression(this.previousSibling.offsetTop);'; 624 str += 'display:expression(this.previousSibling.style.display);" scrolling="no" frameborder="no"></iframe>'; 625 } 626 var div = document.createElement("div"); 627 div.innerHTML = str; 628 div.id = "ContainerPanel"; 629 div.style.display ="none"; 630 document.body.appendChild(div); 631 }//调用calendar.show(dateControl, popControl); 632 //--> 633 <!-- 634 var cal; 635 var isFocus=false; //是否为焦点 636 var pickMode ={ 637 "second":1, 638 "minute":2, 639 "hour":3, 640 "day":4, 641 "month":5, 642 "year":6 }; 643 644 var topY=0,leftX=0; //自定义定位偏移量 2007-02-11 由 寒羽枫添加 645 //选择日期 → 由 寒羽枫 2007-06-10 添加，通过 ID 来选日期 646 function SelectDateById(id,strFormat,x,y) 647 { 648 var obj = document.getElementById(id); 649 if(obj == null){return false;} 650 obj.focus(); 651 if(obj.onclick != null){obj.onclick();} 652 else if(obj.click != null){obj.click();} 653 else{SelectDate(obj,strFormat,x,y)} 654 } 655 656 //选择日期 → 由 寒羽枫 2006-06-25 添加 657 function SelectDate(obj,strFormat,x,y) 658 { 659 660 leftX =(x == null) ? leftX : x; 661 topY =(y == null) ? topY : y;//自定义定位偏移量 2007-02-11 由 寒羽枫添加 662 if(document.getElementById("ContainerPanel")==null){InitContainerPanel();} 663 var date = new Date(); 664 var by = date.getFullYear()-50; //最小值 → 50 年前 665 var ey = date.getFullYear()+50; //最大值 → 50 年后 666 //cal = new Calendar(by, ey,1,strFormat); //初始化英文版，0 为中文版 667 cal = (cal==null) ? new Calendar(by, ey, 0) : cal; //不用每次都初始化 2006-12-03 修正 668 cal.DateMode =pickMode["second"]; //复位 669 if(strFormat.indexOf('s')< 0) {cal.DateMode =pickMode["minute"];}//精度为分 670 if(strFormat.indexOf('m')< 0) {cal.DateMode =pickMode["hour"];}//精度为时 671 if(strFormat.indexOf('h')< 0) {cal.DateMode =pickMode["day"];}//精度为日 672 if(strFormat.indexOf('d')< 0) {cal.DateMode =pickMode["month"];}//精度为月 673 if(strFormat.indexOf('M')< 0) {cal.DateMode =pickMode["year"];}//精度为年 674 if(strFormat.indexOf('y')< 0) {cal.DateMode =pickMode["second"];}//默认精度为秒 675 cal.dateFormatStyleOld = cal.dateFormatStyle; 676 cal.dateFormatStyle = strFormat; 677 cal.show(obj); 678 } 679 /**//**//**//**//**//**//**//** 680 * 返回日期 681 * @param d the delimiter 682 * @param p the pattern of your date 683 2006-06-25 由 寒羽枫 修改为根据用户指定的 style 来确定； 684 */ 685 String.prototype.toDate = function(style) { 686 var y = this.substring(style.indexOf('y'),style.lastIndexOf('y')+1);//年 687 var M = this.substring(style.indexOf('M'),style.lastIndexOf('M')+1);//月 688 var d = this.substring(style.indexOf('d'),style.lastIndexOf('d')+1);//日 689 var h = this.substring(style.indexOf('h'),style.lastIndexOf('h')+1);//时 690 var m = this.substring(style.indexOf('m'),style.lastIndexOf('m')+1);//分 691 var s = this.substring(style.indexOf('s'),style.lastIndexOf('s')+1);//秒 692 693 if(s == null ||s == "" || isNaN(s)) {s = new Date().getSeconds();} 694 if(m == null ||m == "" || isNaN(m)) {m = new Date().getMinutes();} 695 if(h == null ||h == "" || isNaN(h)) {h = new Date().getHours();} 696 if(d == null ||d == "" || isNaN(d)) {d = new Date().getDate();} 697 if(M == null ||M == "" || isNaN(M)) {M = new Date().getMonth()+1;} 698 if(y == null ||y == "" || isNaN(y)) {y = new Date().getFullYear();} 699 var dt ; 700 eval ("dt = new Date('"+ y+"', '"+(M-1)+"','"+ d+"','"+ h+"','"+ m+"','"+ s +"')"); 701 return dt; 702 } 703 704 /**//**//**//**//**//**//**//** 705 * 格式化日期 706 * @param d the delimiter 707 * @param p the pattern of your date 708 * @author meizz 709 */ 710 Date.prototype.format = function(style) { 711 var o = { 712 "M+" : this.getMonth() + 1, //month 713 "d+" : this.getDate(), //day 714 "h+" : this.getHours(), //hour 715 "m+" : this.getMinutes(), //minute 716 "s+" : this.getSeconds(), //second 717 "w+" : "天一二三四五六".charAt(this.getDay()), //week 718 "q+" : Math.floor((this.getMonth() + 3) / 3), //quarter 719 "S" : this.getMilliseconds() //millisecond 720 } 721 if(/(y+)/.test(style)) { 722 style = style.replace(RegExp.$1, 723 (this.getFullYear() + "").substr(4 - RegExp.$1.length)); 724 } 725 for(var k in o){ 726 if(new RegExp("("+ k +")").test(style)){ 727 style = style.replace(RegExp.$1, 728 RegExp.$1.length == 1 ? o[k] : 729 ("00" + o[k]).substr(("" + o[k]).length)); 730 } 731 } 732 return style; 733 } 734 735 //2007-09-14 由寒羽枫添加返回所选日期 736 Calendar.prototype.ReturnDate = function(dt) { 737 if (this.dateControl != null){this.dateControl.value = dt;} 738 calendar.hide(); 739 if(this.dateControl.onchange == null){return;} 740 //将 onchange 转成其它函数，以免触发验证事件 741 var ev = this.dateControl.onchange.toString(); //找出函数的字串 742 ev = ev.substring( 743 ((ev.indexOf("ValidatorOnChange();")> 0) ? ev.indexOf("ValidatorOnChange();") + 20 : ev.indexOf("{") + 1) 744 , ev.lastIndexOf("}"));//去除验证函数 ValidatorOnChange(); 745 var fun = new Function(ev); //重新定义函数 746 this.dateControl.changeEvent = fun; 747 this.dateControl.changeEvent();//触发自定义 changeEvent 函数 748 } 749 750 /**//**//**//**//**//**//**//** 751 * 日历类 752 * @param beginYear 1990 753 * @param endYear 2010 754 * @param lang 0(中文)|1(英语) 可自由扩充 755 * @param dateFormatStyle "yyyy-MM-dd"; 756 * @version 2006-04-01 757 * @author KimSoft (jinqinghua [at] gmail.com) 758 * @update 759 */ 760 function Calendar(beginYear, endYear, lang, dateFormatStyle) { 761 this.beginYear = 1950; 762 this.endYear = 2050; 763 this.lang = 0; //0(中文) | 1(英文) 764 this.dateFormatStyle = "yyyy-MM-dd hh:mm:ss"; 765 766 if (beginYear != null && endYear != null){ 767 this.beginYear = beginYear; 768 this.endYear = endYear; 769 } 770 if (lang != null){ 771 this.lang = lang 772 } 773 774 if (dateFormatStyle != null){ 775 this.dateFormatStyle = dateFormatStyle 776 } 777 778 this.dateControl = null; 779 this.panel = this.getElementById("calendarPanel"); 780 this.container = this.getElementById("ContainerPanel"); 781 this.form = null; 782 783 this.date = new Date(); 784 this.year = this.date.getFullYear(); 785 this.month = this.date.getMonth(); 786 787 this.day = this.date.getDate(); 788 this.hour = this.date.getHours(); 789 this.minute = this.date.getMinutes(); 790 this.second = this.date.getSeconds(); 791 792 this.colors = { 793 "cur_word" : "#FFFFFF", //当日日期文字颜色 794 "cur_bg" : "#00FF00", //当日日期单元格背影色 795 "sel_bg" : "#FFCCCC", //已被选择的日期单元格背影色 2006-12-03 寒羽枫添加 796 "sun_word" : "#FF0000", //星期天文字颜色 797 "sat_word" : "#0000FF", //星期六文字颜色 798 "td_word_light" : "#333333", //单元格文字颜色 799 "td_word_dark" : "#CCCCCC", //单元格文字暗色 800 "td_bg_out" : "#EFEFEF", //单元格背影色 801 "td_bg_over" : "#FFCC00", //单元格背影色 802 "tr_word" : "#FFFFFF", //日历头文字颜色 803 "tr_bg" : "#666666", //日历头背影色 804 "input_border" : "#CCCCCC", //input控件的边框颜色 805 "input_bg" : "#EFEFEF" //input控件的背影色 806 } 807 /* //2008-01-29 放到了 show ，因为要做 pickMode 判断 808 this.draw(); 809 this.bindYear(); 810 this.bindMonth(); 811 */ 812 //this.changeSelect(); 813 //this.bindData(); //2006-12-30 由民工.砖家注释 814 } 815 816 /**//**//**//**//**//**//**//** 817 * 日历类属性（语言包，可自由扩展） 818 */ 819 Calendar.language = { 820 "year" : [[""], [""]], 821 "months" : [["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"], 822 ["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"] 823 ], 824 "weeks" : [["日","一","二","三","四","五","六"], 825 ["SUN","MON","TUR","WED","THU","FRI","SAT"] 826 ], 827 "hour" : [["时"], ["H"]], 828 "minute" : [["分"], ["M"]], 829 "second" : [["秒"], ["S"]], 830 "clear" : [["清空"], ["CLS"]], 831 "today" : [["今天"], ["TODAY"]], 832 "pickTxt" : [["确定"], ["OK"]],//pickMode 精确到年、月时把今天变成“确定” 833 "close" : [["关闭"], ["CLOSE"]] 834 } 835 836 Calendar.prototype.draw = function() { 837 calendar = this; 838 839 var mvAry = []; 840 //mvAry[mvAry.length] = ' <form name="calendarForm" style="margin: 0px;">'; //因 <form> 不能嵌套， 2006-12-01 由寒羽枫改用 Div 841 mvAry[mvAry.length] = ' <div name="calendarForm" style="margin: 0px;">'; 842 mvAry[mvAry.length] = ' <table width="100%" border="0" cellpadding="0" cellspacing="1" style="font-size:12px;">'; 843 mvAry[mvAry.length] = ' <tr>'; 844 mvAry[mvAry.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;'; 845 if(calendar.DateMode > pickMode["month"]){mvAry[mvAry.length] = 'display:none;';}//pickMode 精确到年时隐藏“月” 846 mvAry[mvAry.length] ='" name="prevMonth" type="button" id="prevMonth" value="<" /></th>'; 847 mvAry[mvAry.length] = ' <th align="center" width="98%" nowrap="nowrap"><select name="calendarYear" id="calendarYear" style="font-size:12px;"></select><select name="calendarMonth" id="calendarMonth" style="font-size:12px;'; 848 if(calendar.DateMode > pickMode["month"]){mvAry[mvAry.length] = 'display:none;';}//pickMode 精确到年时隐藏“月” 849 mvAry[mvAry.length] = '"></select></th>'; 850 mvAry[mvAry.length] = ' <th align="right" width="1%"><input style="border: 1px solid ' + calendar.colors["input_border"] + ';background-color:' + calendar.colors["input_bg"] + ';width:16px;height:20px;'; 851 if(calendar.DateMode > pickMode["month"]){mvAry[mvAry.length] = 'display:none;';}//pickMode 精确到年时隐藏“月” 852 mvAry[mvAry.length] ='" name="nextMonth" type="button" id="nextMonth" value=">" /></th>'; 853 mvAry[mvAry.length] = ' </tr>'; 854 mvAry[mvAry.length] = ' </table>'; 855 mvAry[mvAry.length] = ' <table id="calendarTable" width="100%" style="border:0px solid #CCCCCC;background-color:#FFFFFF;font-size:12px;'; 856 if(calendar.DateMode >= pickMode["month"]){mvAry[mvAry.length] = 'display:none;';}//pickMode 精确到年、月时隐藏“天” 857 mvAry[mvAry.length] = '" border="0" cellpadding="3" cellspacing="1">'; 858 mvAry[mvAry.length] = ' <tr>'; 859 for(var i = 0; i < 7; i++) { 860 mvAry[mvAry.length] = ' <th style="font-weight:normal;background-color:' + calendar.colors["tr_bg"] + ';color:' + calendar.colors["tr_word"] + ';">' + Calendar.language["weeks"][this.lang][i] + '</th>'; 861 } 862 mvAry[mvAry.length] = ' </tr>'; 863 for(var i = 0; i < 6;i++){ 864 mvAry[mvAry.length] = ' <tr align="center">'; 865 for(var j = 0; j < 7; j++) { 866 if (j == 0){ 867 mvAry[mvAry.length] = ' <td style="cursor:default;color:' + calendar.colors["sun_word"] + ';"></td>'; 868 } else if(j == 6) { 869 mvAry[mvAry.length] = ' <td style="cursor:default;color:' + calendar.colors["sat_word"] + ';"></td>'; 870 } else { 871 mvAry[mvAry.length] = ' <td style="cursor:default;"></td>'; 872 } 873 } 874 mvAry[mvAry.length] = ' </tr>'; 875 } 876 877 //2009-03-03 添加的代码，放置时间的行 878 mvAry[mvAry.length] = ' <tr style="'; 879 if(calendar.DateMode >= pickMode["day"]){mvAry[mvAry.length] = 'display:none;';}//pickMode 精确到时日隐藏“时间” 880 mvAry[mvAry.length] = '"><td align="center" colspan="7">'; 881 mvAry[mvAry.length] = ' <select name="calendarHour" id="calendarHour" style="font-size:12px;"></select>' + Calendar.language["hour"][this.lang]; 882 mvAry[mvAry.length] = '<span style="' 883 if(calendar.DateMode >= pickMode["hour"]){mvAry[mvAry.length] = 'display:none;';}//pickMode 精确到小时时隐藏“分” 884 mvAry[mvAry.length] = '"><select name="calendarMinute" id="calendarMinute" style="font-size:12px;"></select>' + Calendar.language["minute"][this.lang]+'</span>'; 885 mvAry[mvAry.length] = '<span style="' 886 if(calendar.DateMode >= pickMode["minute"]){mvAry[mvAry.length] = 'display:none;';}//pickMode 精确到小时、分时隐藏“秒” 887 mvAry[mvAry.length] = '"><select name="calendarSecond" id="calendarSecond" style="font-size:12px;"></select>'+ Calendar.language["second"][this.lang]+'</span>'; 888 mvAry[mvAry.length] = ' </td></tr>'; 889 890 mvAry[mvAry.length] = ' </table>'; 891 //mvAry[mvAry.length] = ' </from>'; 892 mvAry[mvAry.length] = ' <div align="center" style="padding:4px 4px 4px 4px;background-color:' + calendar.colors["input_bg"] + ';">'; 893 mvAry[mvAry.length] = ' <input name="calendarClear" type="button" id="calendarClear" value="' + 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;"/>'; 894 mvAry[mvAry.length] = ' <input name="calendarToday" type="button" id="calendarToday" value="' 895 mvAry[mvAry.length] = (calendar.DateMode == pickMode["day"]) ? Calendar.language["today"][this.lang] : Calendar.language["pickTxt"][this.lang]; 896 mvAry[mvAry.length] = '" style="border: 1px solid ' + calendar.colors["input_border"] + ';background-color:' + calendar.colors["input_bg"] + ';width:60px;height:20px;font-size:12px;cursor:pointer"/>'; 897 mvAry[mvAry.length] = ' <input name="calendarClose" 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;height:20px;font-size:12px;cursor:pointer"/>'; 898 mvAry[mvAry.length] = ' </div>'; 899 900 mvAry[mvAry.length] = ' </div>'; 901 this.panel.innerHTML = mvAry.join(""); 902 903 /**//**//**//******** 以下代码由寒羽枫 2006-12-01 添加 **********/ 904 var obj = this.getElementById("prevMonth"); 905 obj.onclick = function () {calendar.goPrevMonth(calendar);} 906 obj.onblur = function () {calendar.onblur();} 907 this.prevMonth= obj; 908 909 obj = this.getElementById("nextMonth"); 910 obj.onclick = function () {calendar.goNextMonth(calendar);} 911 obj.onblur = function () {calendar.onblur();} 912 this.nextMonth= obj; 913 914 obj = this.getElementById("calendarClear"); 915 obj.onclick = function () 916 { calendar.ReturnDate(""); /*calendar.dateControl.value = "";calendar.hide();*///2007-09-14 由寒羽枫注释 917 } 918 this.calendarClear = obj; 919 920 obj = this.getElementById("calendarClose"); 921 obj.onclick = function () {calendar.hide();} 922 this.calendarClose = obj; 923 924 obj = this.getElementById("calendarYear"); 925 obj.onchange = function () {calendar.update(calendar);} 926 obj.onblur = function () {calendar.onblur();} 927 this.calendarYear = obj; 928 929 obj = this.getElementById("calendarMonth"); 930 with(obj) 931 { 932 onchange = function () {calendar.update(calendar);} 933 onblur = function () {calendar.onblur();} 934 }this.calendarMonth = obj; 935 936 obj = this.getElementById("calendarHour"); 937 obj.onchange = function () {calendar.hour = this.options[this.selectedIndex].value;} 938 obj.onblur = function () {calendar.onblur();} 939 this.calendarHour = obj; 940 941 obj = this.getElementById("calendarMinute"); 942 obj.onchange = function () {calendar.minute = this.options[this.selectedIndex].value;} 943 obj.onblur = function () {calendar.onblur();} 944 this.calendarMinute = obj; 945 946 obj = this.getElementById("calendarSecond"); 947 obj.onchange = function () {calendar.second = this.options[this.selectedIndex].value;} 948 obj.onblur = function () {calendar.onblur();} 949 this.calendarSecond = obj; 950 951 obj = this.getElementById("calendarToday"); 952 obj.onclick = function () { 953 var today = (calendar.DateMode != pickMode["day"]) ? 954 new Date(calendar.year,calendar.month,calendar.day,calendar.hour,calendar.minute,calendar.second) 955 : new Date();//2008-01-29 956 calendar.ReturnDate(today.format(calendar.dateFormatStyle)); 957 } 958 this.calendarToday = obj; 959 } 960 961 //年份下拉框绑定数据 962 Calendar.prototype.bindYear = function() { 963 var cy = this.calendarYear;//2006-12-01 由寒羽枫修改 964 cy.length = 0; 965 for (var i = this.beginYear; i <= this.endYear; i++){ 966 cy.options[cy.length] = new Option(i + Calendar.language["year"][this.lang], i); 967 } 968 } 969 970 //月份下拉框绑定数据 971 Calendar.prototype.bindMonth = function() { 972 var cm = this.calendarMonth;//2006-12-01 由寒羽枫修改 973 cm.length = 0; 974 for (var i = 0; i < 12; i++){ 975 cm.options[cm.length] = new Option(Calendar.language["months"][this.lang][i], i); 976 } 977 } 978 979 //小时下拉框绑定数据 980 Calendar.prototype.bindHour = function() { 981 var ch = this.calendarHour; 982 if(ch.length > 0){return;}//2009-03-03 不需要重新绑定，提高性能 983 //ch.length = 0; 984 var h; 985 for (var i = 0; i < 24; i++){ 986 h = ("00" + i +"").substr(("" + i).length); 987 ch.options[ch.length] = new Option(h, h); 988 } 989 } 990 991 //分钟下拉框绑定数据 992 Calendar.prototype.bindMinute = function() { 993 var cM = this.calendarMinute; 994 if(cM.length > 0){return;}//2009-03-03 不需要重新绑定，提高性能 995 //cM.length = 0; 996 var M; 997 for (var i = 0; i < 60; i++){ 998 M = ("00" + i +"").substr(("" + i).length); 999 cM.options[cM.length] = new Option(M, M); 1000 } 1001 } 1002 1003 //秒钟下拉框绑定数据 1004 Calendar.prototype.bindSecond = function() { 1005 var cs = this.calendarSecond; 1006 if(cs.length > 0){return;}//2009-03-03 不需要重新绑定，提高性能 1007 //cs.length = 0; 1008 var s; 1009 for (var i = 0; i < 60; i++){ 1010 s = ("00" + i +"").substr(("" + i).length); 1011 cs.options[cs.length] = new Option(s, s); 1012 } 1013 } 1014 1015 //向前一月 1016 Calendar.prototype.goPrevMonth = function(e){ 1017 if (this.year == this.beginYear && this.month == 0){return;} 1018 this.month--; 1019 if (this.month == -1) { 1020 this.year--; 1021 this.month = 11; 1022 } 1023 this.date = new Date(this.year, this.month, 1); 1024 this.changeSelect(); 1025 this.bindData(); 1026 } 1027 1028 //向后一月 1029 Calendar.prototype.goNextMonth = function(e){ 1030 if (this.year == this.endYear && this.month == 11){return;} 1031 this.month++; 1032 if (this.month == 12) { 1033 this.year++; 1034 this.month = 0; 1035 } 1036 this.date = new Date(this.year, this.month, 1); 1037 this.changeSelect(); 1038 this.bindData(); 1039 } 1040 1041 //改变SELECT选中状态 1042 Calendar.prototype.changeSelect = function() { 1043 var cy = this.calendarYear;//2006-12-01 由寒羽枫修改 1044 var cm = this.calendarMonth; 1045 var ch = this.calendarHour; 1046 var cM = this.calendarMinute; 1047 var cs = this.calendarSecond; 1048 //2006-12-30 由民工.砖家修改，减少运算次数 1049 cy[this.date.getFullYear()-this.beginYear].selected = true; 1050 cm[this.date.getMonth()].selected =true; 1051 1052 //2009-03-03 添加，初始化时间的值 1053 ch[this.hour].selected =true; 1054 cM[this.minute].selected =true; 1055 cs[this.second].selected =true; 1056 } 1057 1058 //更新年、月 1059 Calendar.prototype.update = function (e){ 1060 this.year = e.calendarYear.options[e.calendarYear.selectedIndex].value;//2006-12-01 由寒羽枫修改 1061 this.month = e.calendarMonth.options[e.calendarMonth.selectedIndex].value; 1062 this.date = new Date(this.year, this.month, 1); 1063 //this.changeSelect(); 1064 this.bindData(); 1065 } 1066 1067 //绑定数据到月视图 1068 Calendar.prototype.bindData = function () { 1069 var calendar = this; 1070 if(calendar.DateMode >= pickMode["month"]){return;}//2008-01-29 1071 // var dateArray = this.getMonthViewArray(this.date.getYear(), this.date.getMonth()); 1072 //2006-12-30 由民工.砖家修改 在Firefox 下年份错误 1073 var dateArray = this.getMonthViewArray(this.date.getFullYear(), this.date.getMonth()); 1074 var tds = this.getElementById("calendarTable").getElementsByTagName("td"); 1075 for(var i = 0; i < tds.length; i++) { 1076 tds[i].style.backgroundColor = calendar.colors["td_bg_out"]; 1077 tds[i].onclick = function () {return;} 1078 tds[i].onmouseover = function () {return;} 1079 tds[i].onmouseout = function () {return;} 1080 if (i > dateArray.length - 1) break; 1081 tds[i].innerHTML = dateArray[i]; 1082 if (dateArray[i] != " "){ 1083 tds[i].bgColorTxt = "td_bg_out"; //2009-03-03 保存背景色的class 1084 var cur = new Date(); 1085 tds[i].isToday = false; 1086 if (cur.getFullYear() == calendar.date.getFullYear() && cur.getMonth() == calendar.date.getMonth() && cur.getDate() == dateArray[i]) { 1087 //是今天的单元格 1088 tds[i].style.backgroundColor = calendar.colors["cur_bg"]; 1089 tds[i].bgColorTxt = "cur_bg"; 1090 tds[i].isToday = true; 1091 } 1092 if(calendar.dateControl != null ) 1093 { 1094 cur = calendar.dateControl.value.toDate(calendar.dateFormatStyle); 1095 if (cur.getFullYear() == calendar.date.getFullYear() && cur.getMonth() == calendar.date.getMonth()&& cur.getDate() == dateArray[i]) { 1096 //是已被选中的单元格 1097 calendar.selectedDayTD = tds[i]; 1098 tds[i].style.backgroundColor = calendar.colors["sel_bg"]; 1099 tds[i].bgColorTxt = "sel_bg"; 1100 } 1101 } 1102 tds[i].onclick = function () { 1103 if(calendar.DateMode == pickMode["day"]) //2009-03-03 当选择日期时，点击格子即返回值 1104 { 1105 calendar.ReturnDate(new Date(calendar.date.getFullYear(), 1106 calendar.date.getMonth(), 1107 this.innerHTML).format(calendar.dateFormatStyle)); 1108 } 1109 else 1110 { 1111 if(calendar.selectedDayTD != null) //2009-03-03 清除已选中的背景色 1112 { 1113 calendar.selectedDayTD.style.backgroundColor =(calendar.selectedDayTD.isToday)? calendar.colors["cur_bg"] : calendar.colors["td_bg_out"]; 1114 } 1115 this.style.backgroundColor = calendar.colors["sel_bg"]; 1116 calendar.day = this.innerHTML; 1117 calendar.selectedDayTD = this; //2009-03-03 记录已选中的日子 1118 } 1119 } 1120 tds[i].style.cursor ="pointer"; //2007-08-06 由寒羽枫添加，鼠标变成手指状 1121 tds[i].onmouseover = function () { 1122 this.style.backgroundColor = calendar.colors["td_bg_over"]; 1123 } 1124 tds[i].onmouseout = function () { 1125 if(calendar.selectedDayTD != this) { 1126 this.style.backgroundColor = calendar.colors[this.bgColorTxt];} 1127 } 1128 tds[i].onblur = function () {calendar.onblur();} 1129 } 1130 } 1131 } 1132 1133 //根据年、月得到月视图数据(数组形式) 1134 Calendar.prototype.getMonthViewArray = function (y, m) { 1135 var mvArray = []; 1136 var dayOfFirstDay = new Date(y, m, 1).getDay(); 1137 var daysOfMonth = new Date(y, m + 1, 0).getDate(); 1138 for (var i = 0; i < 42; i++) { 1139 mvArray[i] = " "; 1140 } 1141 for (var i = 0; i < daysOfMonth; i++){ 1142 mvArray[i + dayOfFirstDay] = i + 1; 1143 } 1144 return mvArray; 1145 } 1146 1147 //扩展 document.getElementById(id) 多浏览器兼容性 from meizz tree source 1148 Calendar.prototype.getElementById = function(id){ 1149 if (typeof(id) != "string" || id == "") return null; 1150 if (document.getElementById) return document.getElementById(id); 1151 if (document.all) return document.all(id); 1152 try {return eval(id);} catch(e){ return null;} 1153 } 1154 1155 //扩展 object.getElementsByTagName(tagName) 1156 Calendar.prototype.getElementsByTagName = function(object, tagName){ 1157 if (document.getElementsByTagName) return document.getElementsByTagName(tagName); 1158 if (document.all) return document.all.tags(tagName); 1159 } 1160 1161 //取得HTML控件绝对位置 1162 Calendar.prototype.getAbsPoint = function (e){ 1163 var x = e.offsetLeft; 1164 var y = e.offsetTop; 1165 while(e = e.offsetParent){ 1166 x += e.offsetLeft; 1167 y += e.offsetTop; 1168 } 1169 return {"x": x, "y": y}; 1170 } 1171 1172 //显示日历 1173 Calendar.prototype.show = function (dateObj, popControl) { 1174 if (dateObj == null){ 1175 throw new Error("arguments[0] is necessary") 1176 } 1177 this.dateControl = dateObj; 1178 var now = new Date(); 1179 this.date = (dateObj.value.length > 0) ? new Date(dateObj.value.toDate(this.dateFormatStyle)) : now.format(this.dateFormatStyle).toDate(this.dateFormatStyle) ;//2008-01-29 寒羽枫添加 → 若为空则根据dateFormatStyle初始化日期 1180 1181 if(this.panel.innerHTML==""||cal.dateFormatStyleOld != cal.dateFormatStyle)//2008-01-29 把构造表格放在此处，2009-03-03 若请示的样式改变，则重新初始化 1182 { 1183 this.draw(); 1184 this.bindYear(); 1185 this.bindMonth(); 1186 this.bindHour(); 1187 this.bindMinute(); 1188 this.bindSecond(); 1189 } 1190 this.year = this.date.getFullYear(); 1191 this.month = this.date.getMonth(); 1192 this.day = this.date.getDate(); 1193 this.hour = this.date.getHours(); 1194 this.minute = this.date.getMinutes(); 1195 this.second = this.date.getSeconds(); 1196 this.changeSelect(); 1197 this.bindData(); 1198 1199 if (popControl == null){ 1200 popControl = dateObj; 1201 } 1202 var xy = this.getAbsPoint(popControl); 1203 //this.panel.style.left = xy.x + "px"; 1204 //this.panel.style.top = (xy.y + dateObj.offsetHeight) + "px"; 1205 this.panel.style.left = (xy.x + leftX)+ "px"; //由寒羽枫 2007-02-11 修改 → 加入自定义偏移量 1206 this.panel.style.top = (xy.y + topY + dateObj.offsetHeight) + "px"; 1207 1208 //由寒羽枫 2006-06-25 修改 → 把 visibility 变为 display，并添加失去焦点的事件 //this.setDisplayStyle("select", "hidden"); 1209 //this.panel.style.visibility = "visible"; 1210 //this.container.style.visibility = "visible"; 1211 this.panel.style.display = ""; 1212 this.container.style.display = ""; 1213 1214 if( !this.dateControl.isTransEvent) 1215 { 1216 this.dateControl.isTransEvent = true; 1217 /* 已写在返回值的时候 ReturnDate 函数中，去除验证事件的函数 1218 this.dateControl.changeEvent = this.dateControl.onchange;//将 onchange 转成其它函数，以免触发验证事件 1219 this.dateControl.onchange = function() 1220 {if(typeof(this.changeEvent) =='function'){this.changeEvent();}}*/ 1221 if(this.dateControl.onblur != null){ 1222 this.dateControl.blurEvent = this.dateControl.onblur;}//2007-09-14 保存主文本框的 onblur ，使其原本的事件不被覆盖 1223 this.dateControl.onblur = function() 1224 {calendar.onblur();if(typeof(this.blurEvent) =='function'){this.blurEvent();} 1225 } 1226 } 1227 1228 this.container.onmouseover = function(){isFocus=true;} 1229 this.container.onmouseout = function(){isFocus=false;} 1230 } 1231 1232 //隐藏日历 1233 Calendar.prototype.hide = function() { 1234 //this.setDisplayStyle("select", "visible"); 1235 //this.panel.style.visibility = "hidden"; 1236 //this.container.style.visibility = "hidden"; 1237 this.panel.style.display = "none"; 1238 this.container.style.display = "none"; 1239 isFocus=false; 1240 } 1241 1242 //焦点转移时隐藏日历 → 由寒羽枫 2006-06-25 添加 1243 Calendar.prototype.onblur = function() { 1244 if(!isFocus){this.hide();} 1245 } 1246 1247 //以下由寒羽枫 2007-07-26 修改 → 确保日历容器节点在 body 最后，否则 FireFox 中不能出现在最上方 1248 function InitContainerPanel() //初始化容器 1249 { 1250 var str = '<div id="calendarPanel" style="position: absolute;display: none;z-index:9999; background-color: #FFFFFF;border: 1px solid #CCCCCC;width:175px;font-size:12px;"></div>'; 1251 if(document.all) 1252 { 1253 str += '<iframe style="position:absolute;z-index:2000;width:expression(this.previousSibling.offsetWidth);'; 1254 str += 'height:expression(this.previousSibling.offsetHeight);'; 1255 str += 'left:expression(this.previousSibling.offsetLeft);top:expression(this.previousSibling.offsetTop);'; 1256 str += 'display:expression(this.previousSibling.style.display);" scrolling="no" frameborder="no"></iframe>'; 1257 } 1258 var div = document.createElement("div"); 1259 div.innerHTML = str; 1260 div.id = "ContainerPanel"; 1261 div.style.display ="none"; 1262 document.body.appendChild(div); 1263 }//调用calendar.show(dateControl, popControl); 1264 //-->
html代码如下:
View Code
1 <%@ page language="java" import="java.util.*" pageEncoding="gbk"%> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml" > 4 <head id="Head1"> 5 <script src="js/WebCalendar.js" type="text/javascript"></script> 6 </head> 7 <body> 8 <form name="form1" method="post" action="WebForm1.aspx" id="form1"> 9 <input type="text" value="" maxlength="100" id="Txt_CreateDateST01" onclick="SelectDate(this,'yyyy 年')" readonly="true" style="width:265px;cursor:pointer" /><br /> 10 <input type="text" value="" maxlength="100" id="Txt_CreateDateST02" onclick="SelectDate(this,'yyyy 年 MM 月')" readonly="true" style="width:265px;cursor:pointer" /><br /> 11 <input type="text" value="" maxlength="100" id="Txt_CreateDateST03" onclick="SelectDate(this,'yyyy-MM-dd')" readonly="true" style="width:265px;cursor:pointer" /><br /> 12 <input type="text" value="" maxlength="100" id="Text1" onclick="SelectDate(this,'yyyy-MM-dd hh时')" readonly="true" style="width:265px;cursor:pointer" /><br /> 13 <input type="text" value="" maxlength="100" id="Text3" onclick="SelectDate(this,'yyyy-MM-dd hh:mm')" readonly="true" style="width:265px;cursor:pointer" /><br /> 14 <input type="text" value="" maxlength="100" id="Text4" onclick="SelectDate(this,'yyyy年MM月dd日 hh时mm分ss秒',0,-150)" readonly="true" style="width:265px;cursor:pointer" /><br /> 15 </form> 16 </body> 17 </html>
