1.日历控件的使用
1 /** 2 * add auto hide when mouse moveout 3 * 4 * @version 1.0.1 5 * @date 2010-11-23 6 * @author coraldane@gmail.com 7 */ 8 9 /** 10 * Date Picker 11 * @param inputObj The input object want to contain date. 12 * @param dateFormatStyle Default Date Formatter is "yyyy-MM-dd", you could use your own defined format. 13 * @param beginDate Default value is 1990-01-01 14 * @param endDate Default value is 2020-01-01 15 * @param lang 0(English)|1(Chinese) Default Language is 0(English). 16 */ 17 function setday(inputObj,dateFormatStyle,beginDate,endDate,lang){ 18 if(null == inputObj){return null;} 19 new Calendar(inputObj,dateFormatStyle,beginDate,endDate,lang).show(); 20 } 21 22 /** 23 * Month Picker 24 * @param inputObj The input object want to contain date. 25 * @param dateFormatStyle Default Date Formatter is "yyyy-MM", you could use your own defined format. 26 * @param beginDate Default value is 1990-01 27 * @param endDate Default value is 2020-01 28 * @param lang 0(English)|1(Chinese) Default Language is 0(English). 29 */ 30 function setmonth(inputObj,dateFormatStyle,beginDate,endDate,lang){ 31 if(null == inputObj){return null;} 32 new Calendar(inputObj,dateFormatStyle,beginDate,endDate,lang,"m").show(); 33 } 34 35 /** 36 Calendar Style 37 */ 38 Calendar.prototype.style = function(){ 39 var strStyle = "<style type='text/css'>"; 40 strStyle += ".calendar {font-size:12px; margin:0;padding:0px;border:1px solid #397EAE;background-color:#DBE7F2;}"; 41 strStyle += ".calendar ul {list-style-type:none; margin:0; padding:0;vertical-align:middle;}"; 42 strStyle += ".calendar li {float:left;}.calendar b{font-weight:bold;}"; 43 strStyle += ".calendar .day li {height:20px;}"; 44 strStyle += ".calendar .day li,.calendar .date li{float:left;14.13%;height:20px;line-height:20px;text-align:center;}"; 45 strStyle += ".calendar .day li{font-weight:bold;} .calendar .date li{background-color:#EDF3F9;}"; 46 strStyle += ".calendar .month li{float:left;24.8%;height:20px;line-height:20px;text-align:center;background-color:#EDF3F9;}"; 47 strStyle += ".calendar li a{ text-decoration:none; font-family:Tahoma; font-size:11px; color:#333}"; 48 strStyle += ".calendar li:hover {cursor:pointer;color:#f30; text-decoration:none;background-color:#EDF3F9;}"; 49 strStyle += ".calendar .date li:hover, .calendar .month li:hover{cursor:pointer;color:#f30; text-decoration:none;background-color:#DBE7F2;}"; 50 strStyle += ".calendarlihover {color:#f30;text-decoration:none;background-color:#E8F2FE;}"; 51 strStyle += ".calendar li a.hasArticle {font-weight:bold; color:#f60 !important}"; 52 strStyle += ".lastMonthDate, .nextMonthDate {color:#bbb;font-size:11px}"; 53 strStyle += ".selectThisYear, .selectThisMonth{text-decoration:none; margin:0px; color:#000; font-weight:bold}"; 54 strStyle += ".calendar .LastMonth, .calendar .NextMonth{text-decoration:none; color:#000; font-size:18px; font-weight:bold; line-height:16px;}"; 55 strStyle += ".calendarTitle{background:#EDF3F9;text-align:center;height:20px;line-height:20px;clear:both;100%;}"; 56 strStyle += ".calendarTitle .mark{text-decoration:none;color:#000;font-family:Tahoma;font-size:18px;font-weight:normal;}"; 57 strStyle += ".today{ background-color:#ffffaa;border:1px solid #f60;padding:0 1px;}"; 58 strStyle += ".today a { color:#f30; }"; 59 strStyle += ".calendarBottom {text-align:center;height:20px;line-height:20px;clear:both;100%;border-top:1px solid #ddd;}"; 60 strStyle += ".calendarBottom li{float:left;height:20px;line-height:20px;font-weight:bold;text-align:center;}"; 61 strStyle += "</style>"; 62 return strStyle; 63 } 64 65 /** 66 //Classic Style 67 Calendar.prototype.style = function(){ 68 var strStyle = "<style type='text/css'>"; 69 strStyle += ".calendar {font-size:12px; margin:0;padding:0px;border:1px solid #397EAE;}"; 70 strStyle += ".calendar ul {list-style-type:none; margin:0; padding:0;vertical-align:middle;}"; 71 strStyle += ".calendar li {float:left;}.calendar b{font-weight:bold;}"; 72 strStyle += ".calendar .day { background-color:#EDF5FF; height:20px;}"; 73 strStyle += ".calendar .day li,.calendar .date li{ float:left; 14.13%; height:20px; line-height:20px; text-align:center}"; 74 strStyle += ".calendar .month li{ float:left; 24.8%; height:20px; line-height:20px; text-align:center}"; 75 strStyle += ".calendar li a{ text-decoration:none; font-family:Tahoma; font-size:11px; color:#333}"; 76 strStyle += ".calendar li:hover {cursor:pointer;color:#f30; text-decoration:none;background-color:#E8F2FE;}"; 77 strStyle += ".calendarlihover {color:#f30;text-decoration:none;background-color:#E8F2FE;}"; 78 strStyle += ".calendar li a.hasArticle {font-weight:bold; color:#f60 !important}"; 79 strStyle += ".lastMonthDate, .nextMonthDate {color:#bbb;font-size:11px}"; 80 strStyle += ".selectThisYear, .selectThisMonth{text-decoration:none; margin:0px; color:#000; font-weight:bold}"; 81 strStyle += ".calendar .LastMonth, .calendar .NextMonth{text-decoration:none; color:#000; font-size:18px; font-weight:bold; line-height:16px;}"; 82 strStyle += ".calendarTitle {text-align:center;height:20px;line-height:20px;clear:both;100%;}"; 83 strStyle += ".calendarTitle .mark{text-decoration: none;color:#000;font-family:Tahoma;font-size:18px;font-weight:normal;line-height: 16px;}"; 84 strStyle += ".today{ background-color:#ffffaa;border:1px solid #f60;padding:0 1px;}"; 85 strStyle += ".today a { color:#f30; }"; 86 strStyle += ".calendarBottom {text-align:center;height:20px;line-height:20px;clear:both;100%;border-top:1px solid #ddd;}"; 87 strStyle += ".calendarBottom li{float:left;height:20px;line-height:20px;font-weight:bold;text-align:center;}"; 88 strStyle += "</style>"; 89 return strStyle; 90 } 91 */ 92 93 function getFrameDocument(frame){ 94 if ( frame.contentDocument ) { // DOM 95 var doc = frame.contentDocument; 96 } else if (frame.contentWindow) { // IE win 97 var doc = frame.contentWindow.document; 98 } 99 return doc; 100 } 101 102 /** 103 * Parse Date value from String 104 * @param format the pattern of date 105 */ 106 String.prototype.toDate = function(format){ 107 if(null == format) format="yyyy-MM-dd"; 108 var pattern = format.replace("yyyy", "(\~1{4})").replace("yy", "(\~1{2})") 109 .replace("MM", "(\~1{2})").replace("M", "(\~1{1,2})") 110 .replace("dd", "(\~1{2})").replace("d", "(\~1{1,2})").replace(/~1/g, "d"); 111 112 var returnDate; 113 if (new RegExp(pattern).test(this)) { 114 var yPos = format.indexOf("yyyy"); 115 var mPos = format.indexOf("MM"); 116 var dPos = format.indexOf("dd"); 117 if (mPos == -1) mPos = format.indexOf("M"); 118 if (yPos == -1) yPos = format.indexOf("yy"); 119 if (dPos == -1) dPos = format.indexOf("d"); 120 var pos = new Array(yPos + "y", mPos + "m", dPos + "d"); 121 var data = { y: 0, m: 0, d: 1}; 122 var m = this.match(pattern); 123 for (var i = 1; i < m.length; i++) { 124 if (i == 0) return; 125 var flag = pos[i - 1].split('')[1]; 126 data[flag] = m[i]; 127 //alert(pos[i-1] + ",flag:"+flag + ",i:" + i + "," + data[flag]); 128 }; 129 130 if (data.y.toString().length == 2) { 131 data.y = parseInt("20" + data.y); 132 } 133 data.m = data.m - 1; 134 returnDate = new Date(data.y, data.m, data.d); 135 } 136 if (returnDate == null || isNaN(returnDate)) returnDate = new Date(); 137 return returnDate; 138 139 }; 140 141 /** 142 * Date Format 143 * @param style date format like 'yyyyMMdd' 144 */ 145 Date.prototype.format = function(style) { 146 var o = { 147 "M+" : this.getMonth() + 1, //month 148 "d+" : this.getDate(), //day 149 "h+" : this.getHours(), //hour 150 "m+" : this.getMinutes(), //minute 151 "s+" : this.getSeconds(), //second 152 "w+" : "日一二三四五六".charAt(this.getDay()), //week 153 "q+" : Math.floor((this.getMonth() + 3) / 3), //quarter 154 "S" : this.getMilliseconds() //millisecond 155 } 156 if(/(y+)/.test(style)) { 157 style = style.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); 158 } 159 for(var k in o){ 160 if(new RegExp("("+ k +")").test(style)){ 161 style = style.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)); 162 } 163 } 164 return style; 165 }; 166 167 /** 168 Date add by interval 169 @param interval y Year,m Month,d Day,w Week 170 @param number 171 172 */ 173 Date.prototype.dateAdd = function(interval, number) { 174 switch (interval) { 175 case "y": 176 return new Date(this.getFullYear() + number, this.getMonth(), this.getDate()); 177 break; 178 case "m": 179 return new Date(this.getFullYear(), this.getMonth() + number, checkDate(this.getFullYear(), this.getMonth() + number, this.getDate())); 180 break; 181 case "d": 182 return new Date(this.getFullYear(), this.getMonth(), this.getDate() + number); 183 break; 184 case "w": 185 return new Date(this.getFullYear(), this.getMonth(), 7 * number + this.getDate()); 186 break; 187 } 188 } 189 190 function checkDate(year, month, date){ 191 var enddate = ["31", "28", "31", "30", "31", "30", "31", "31", "30", "31", "30", "31"]; 192 var returnDate = ""; 193 if (year % 4 == 0) { 194 enddate[1] = "29"; 195 } 196 if (date > enddate[month]) { 197 returnDate = enddate[month]; 198 } else { 199 returnDate = date; 200 } 201 return returnDate; 202 } 203 204 /** 205 Calendar language pack 206 default support english and chinese,if you want to add some other language, please extend it. 207 */ 208 Calendar.language = { 209 "title":[["",""],["年","月"]], 210 "months":[["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"], 211 ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"] 212 ], 213 "weeks":[["S","M","T","W","T","F","S"], 214 ["日","一","二","三","四","五","六"] 215 ], 216 weekday:["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"], 217 "clear":[["Clear"], ["清空"]], 218 "today":[["Today","Current"], ["今天","当月"]], 219 "close":[["Close"], ["关闭"]] 220 }; 221 222 /** 223 * Calendar class 224 * @param beginDate 1990-01-01 225 * @param endDate 2020-01-01 226 * @param lang 0(English)|1(Chinese) 227 * @param dateFormatStyle "yyyy-MM-dd"; 228 * @param type d Date Picker/m Month Picker 229 * @version 2010-08-20 230 * @author Coral(coraldane@gmail.com) 231 * @update 232 */ 233 function Calendar(inputObj, dateFormatStyle, beginDate, endDate, lang, type) { 234 this.beginDate = "1900-01-01".toDate(); 235 this.endDate = "2020-01-01".toDate(); 236 this.lang = 0; //default language 237 this.type = "d"; 238 this.dateFormatStyle = "yyyy-MM-dd"; 239 240 if(null != type){ 241 this.type = type; 242 if("m" == this.type){ 243 this.dateFormatStyle = "yyyy-MM"; 244 } 245 } 246 247 if (dateFormatStyle != null){ 248 this.dateFormatStyle = dateFormatStyle; 249 } 250 251 this.currentDate = new Date(); 252 253 var currDate = new Date(); 254 if(null != inputObj.value && "" != inputObj.value){ 255 currDate = inputObj.value.toDate(this.dateFormatStyle); 256 } 257 258 if(null != currDate){ 259 this.date = currDate; 260 }else{ 261 this.date = new Date(); 262 } 263 264 265 if (null != beginDate){ 266 this.beginDate = beginDate; 267 } 268 if(null != endDate){ 269 this.endDate = endDate; 270 } 271 if (lang != null){ 272 this.lang = lang; 273 } 274 275 this.dateControl = inputObj; 276 this.panel = document.getElementById("calendarPanel"); 277 this.iframe = document.getElementById("calendarIframe"); 278 this.isFocus = false; 279 280 this.draw(); 281 } 282 283 Calendar.prototype.draw = function() { 284 var currDate = this.date.format("yyyy-MM").toDate("yyyy-MM"); 285 if(currDate < this.beginDate){ 286 this.date = this.beginDate; 287 } 288 289 if(currDate > this.endDate){ 290 this.date = this.endDate; 291 } 292 293 this.year = this.date.getFullYear(); 294 this.month = this.date.getMonth(); 295 var head = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">' + 296 '<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />' + 297 this.style() + '</head><body style="padding:0px;margin:0px;">'; 298 var thisMonthFirstDate = this.date.dateAdd("d",1-this.date.getDate()); 299 var lastMonthEndDate = thisMonthFirstDate.dateAdd("d",-1); 300 var lastMonthDate = thisMonthFirstDate.getDay(); 301 lastMonthEndDate = lastMonthEndDate.getDate(); 302 var thisMonthLastDate = thisMonthFirstDate.dateAdd("m",1).dateAdd("d",-1); 303 var thisMonthEndDate = thisMonthLastDate.getDate(); 304 var thisMonthEndDay = thisMonthLastDate.getDay(); 305 306 var lis = "<div id='calendar' class='calendar' style='"; 307 if("d" == this.type){ 308 lis += "150"; 309 }else{ 310 lis += "120"; 311 } 312 lis += "px;'>"; 313 lis += "<div class='calendarTitle'><ul>"; 314 lis += "<li id='PrevYear' class='mark' style='12%;' title='Previous Year'>«</li>"; 315 if("d" == this.type){ 316 lis += "<li id='PrevMonth' class='mark' style='12%;' title='Previous Month'>‹</li>"; 317 lis += "<li style='30%;'><span id='selectThisYear' class='selectThisYear'>" + this.date.getFullYear() + "</span>" + Calendar.language["title"][this.lang][0] + "</li>"; 318 if(0 == this.lang){ 319 lis += "<li style='20%;'><span id='selectThisMonth' class='selectThisMonth'>" + Calendar.language["months"][this.lang][this.date.getMonth()] + "</span></li>"; 320 }else{ 321 lis += "<li style='20%;'><span id='selectThisMonth' class='selectThisMonth'>" + (this.date.getMonth() +1) + "</span>" + Calendar.language["title"][this.lang][1] + "</li>"; 322 } 323 lis += "<li id='NextMonth' class='mark' style='12%;' title='Next Month'>›</li>"; 324 lis += "<li id='NextYear' class='mark' style='12%;' title='Next Year'>»</li></ul></div>"; 325 lis += "<div class='calendarBody'>"; 326 lis += "<ul class='day'>"; 327 for(var i=0;i<Calendar.language.weeks[this.lang].length;i++){ 328 lis += "<li title='" + Calendar.language.weekday[i] + "'>" + Calendar.language.weeks[this.lang][i] + "</li>"; 329 } 330 lis += "</ul><ul class='date' id='thisMonthDate'>"; 331 var lastMonthLis = ""; 332 for (var i = 0; i < lastMonthDate; i++) { // Last Month's Date 333 //alert(lastMonthDate + "," + lastMonthEndDate); 334 lastMonthLis = "<li class='lastMonthDate'>" + lastMonthEndDate + "</li>" + lastMonthLis; 335 lastMonthEndDate--; 336 } 337 lis += lastMonthLis; 338 for (i = 1; i <= thisMonthEndDate; i++) { // Current Month's Date 339 var currentDate = thisMonthFirstDate.dateAdd("d",(i-1)); 340 if(currentDate < this.beginDate || currentDate > this.endDate){ 341 lis += "<li class='lastMonthDate'>" + i + "</li>"; 342 continue; 343 } 344 lis += "<li class='thisMonth' title='" + currentDate.format("yyyy-MM-dd") + "'><a href='javascript:void(0);' "; 345 if(currentDate.format("yyyy-MM-dd") == (this.date).format("yyyy-MM-dd")){ 346 lis += "class='today' "; 347 } 348 lis += ">" + i + "</a></li>"; 349 } 350 var j = 1; 351 for (i = thisMonthEndDay; i < 6; i++) { // Next Month's Date 352 lis += "<li class='nextMonthDate'>" + j + "</li>"; 353 j++; 354 } 355 lis += "</ul>" 356 357 lis += "</div>";//close calendarBody 358 lis += "<div class='calendarBottom'><ul>"; 359 lis += "<li id='emptyCalendar' style='27%;' title='Clear'>" + Calendar.language.clear[this.lang] +"</li>"; 360 lis += "<li id='selectCurrent' style='45%;' title='Today'>" + Calendar.language.today[this.lang][0] +"</li>"; 361 }else{ 362 lis += "<li style='74%;'><span id='selectThisYear' class='selectThisYear'>" + this.date.getFullYear() + "</span>" + Calendar.language["title"][this.lang][0] + "</li>"; 363 lis += "<li id='NextYear' class='mark' style='12%;' title='Next Year'>»</li></ul></div>"; 364 lis += "<div class='calendarBody'>"; 365 lis += "</ul><ul class='month' id='thisMonth'>"; 366 for(var i=1; i<=12; i++){ 367 var currentDate = (this.year + "-" + (i>9?i:"0"+i)).toDate("yyyy-MM"); 368 if(currentDate < this.beginDate || currentDate > this.endDate){ 369 lis += "<li class='lastMonthDate'>" + i + "</li>"; 370 continue; 371 } 372 lis += "<li class='thisMonth' title='" + this.year + "-" + (i>9?i:"0"+i) + "-01'><a href='javascript:void(0);'"; 373 if((this.year+"-"+(i>9?i:"0"+i)) == (this.date).format("yyyy-MM")){ 374 lis += " class='today' "; 375 } 376 lis += ">" + i + "</a></li>"; 377 } 378 lis += "</ul>" 379 380 lis += "</div>";//close calendarBody 381 lis += "<div class='calendarBottom'><ul>"; 382 lis += "<li id='emptyCalendar' style='27%;' title='Clear'>" + Calendar.language.clear[this.lang] +"</li>"; 383 lis += "<li id='selectCurrent' style='45%;' title='Current Month'>" + Calendar.language.today[this.lang][1] +"</li>"; 384 } 385 386 lis += "<li id='closeCalendar' style='27%;' title='Close'>" + Calendar.language.close[this.lang] +"</li>"; 387 lis += "</ul></div>";//close calendarBottom 388 lis += "</div>";//close calendar 389 lis += "</body></html>"; 390 var doc = getFrameDocument(this.iframe); 391 doc.writeln(head); 392 doc.writeln(lis); 393 doc.close(); 394 this.document = doc; 395 396 this.bingEvent(); 397 } 398 399 /** 400 * Bind Click Event into Calendar 401 */ 402 Calendar.prototype.bingEvent = function(){ 403 var calendar = this; 404 405 this.setAutoHeight(); 406 407 this.panel.onmouseover = function(){calendar.isFocus = true;} 408 this.panel.onmouseout = function(){calendar.isFocus = false;} 409 410 this.dateControl.onblur = function(){ 411 if(!calendar.isFocus){ 412 calendar.hide(); 413 } 414 } 415 416 this.getElementById("selectCurrent").onclick = function(){ 417 calendar.date = new Date(); 418 calendar.valueSelected(calendar.date); 419 calendar.hide(); 420 } 421 this.getElementById("emptyCalendar").onclick = function(){calendar.dateControl.value = "";calendar.hide();} 422 this.getElementById("closeCalendar").onclick = function(){calendar.hide();} 423 424 this.getElementById("PrevYear").onclick = function(){ 425 calendar.date = calendar.date.dateAdd("y",-1); 426 calendar.draw(); 427 } 428 429 if(this.getElementById("PrevMonth")){ 430 this.getElementById("PrevMonth").onclick = function(){ 431 calendar.date = calendar.date.dateAdd("m",-1); 432 calendar.draw(); 433 } 434 this.getElementById("NextMonth").onclick = function(){ 435 calendar.date = calendar.date.dateAdd("m",1); 436 calendar.draw(); 437 } 438 } 439 440 this.getElementById("NextYear").onclick = function(){ 441 calendar.date = calendar.date.dateAdd("y",1); 442 calendar.draw(); 443 } 444 445 this.getElementById("selectThisYear").onclick = function(){calendar.selectThisYear();} 446 if("d" == this.type){ 447 this.getElementById("selectThisMonth").onclick = function(){calendar.selectThisMonth();} 448 } 449 450 var elements = getElementsByClassName(this.document, "li", "thisMonth"); 451 for(var i=0; i<elements.length; i++){ 452 elements[i].onclick = function(){ 453 calendar.date = this.title.toDate(); 454 calendar.valueSelected(calendar.date); 455 calendar.hide(); 456 } 457 } 458 } 459 460 Calendar.prototype.selectThisYear = function(){ 461 var calendar = this; 462 var curYear = this.date.getFullYear(); 463 var beginYear = this.beginDate.getFullYear(); 464 var endYear = this.endDate.getFullYear(); 465 var spanObj = this.getElementById("selectThisYear"); 466 var selectStr = "<select style='font-size:10px;'>"; 467 for(var i = endYear; i >= beginYear; i--){ 468 selectStr += "<option value='" + i + "'>" + i + "</option>"; 469 } 470 selectStr += "</select>"; 471 spanObj.innerHTML = selectStr; 472 var selectYearObj = spanObj.childNodes(0); 473 selectYearObj.value = curYear; 474 selectYearObj.onchange = function(){ 475 calendar.date.setFullYear(selectYearObj.value); 476 calendar.draw(); 477 } 478 } 479 480 Calendar.prototype.selectThisMonth = function(){ 481 var calendar = this; 482 var curMonth = this.date.getMonth() + 1; 483 var curYear = this.date.getFullYear(); 484 var endYear = this.endDate.getFullYear(); 485 var endMonth = 12; 486 if(curYear == endYear){ 487 endMonth = this.endDate.getMonth + 1; 488 } 489 var spanObj = this.getElementById("selectThisMonth"); 490 var selectStr = "<select style='font-size:10px;'>"; 491 for(var i = 1; i <= endMonth; i++){ 492 selectStr += "<option value='" + i + "'>" + Calendar.language["months"][this.lang][i-1] + "</option>"; 493 } 494 selectStr += "</select>"; 495 spanObj.innerHTML = selectStr; 496 var selectMonthObj = spanObj.childNodes(0); 497 selectMonthObj.value = curMonth; 498 selectMonthObj.onchange = function(){ 499 calendar.date.setMonth(selectMonthObj.value-1); 500 calendar.draw(); 501 } 502 } 503 504 Calendar.prototype.valueSelected = function(date){ 505 this.dateControl.value = date.format(this.dateFormatStyle); 506 } 507 508 /** 509 * Set Auto Height for Calendar Panel Div 510 */ 511 Calendar.prototype.setAutoHeight = function(){ 512 var height = this.document.body.scrollHeight; 513 var width = this.getElementById("calendar").style.width; 514 width = (parseInt(width.substr(0,width.length-1)) + 2) + "px"; 515 this.iframe.style.height = height; 516 this.panel.style.height = height; 517 this.panel.style.width = width; 518 } 519 520 //Extend document.getElementById(id) 521 Calendar.prototype.getElementById = function(id){ 522 if (typeof(id) != "string" || id == "") return null; 523 if(null == this.document) return null; 524 if (this.document.getElementById) return this.document.getElementById(id); 525 if (this.document.all) return this.document.all(id); 526 try {return eval(id);} catch(e){ return null;} 527 } 528 529 //Extend object.getElementsByTagName(tagName) 530 Calendar.prototype.getElementsByTagName = function(tagName){ 531 if(null == this.document) return null; 532 if (this.document.getElementsByTagName) return this.document.getElementsByTagName(tagName); 533 if (this.document.all) return this.document.all.tags(tagName); 534 } 535 536 /** 537 * Find a HTML Object by TagName and className 538 * @param oElm parentNode Object 539 * @param strTagName tag name want to find 540 * @param strClassName class name 541 */ 542 function getElementsByClassName(oElm, strTagName, strClassName){ 543 var arrElements = (strTagName == "*" && oElm.all)? oElm.all:oElm.getElementsByTagName(strTagName); 544 var arrReturnElements = new Array(); 545 strClassName = strClassName.replace(/-/g, "\-"); 546 var oRegExp = new RegExp("(^|\s)" + strClassName + "(\s|$)"); 547 var oElement; 548 for(var i=0; i < arrElements.length; i++){ 549 oElement = arrElements[i]; 550 if(oRegExp.test(oElement.className)){ 551 arrReturnElements.push(oElement); 552 } 553 } 554 return (arrReturnElements) 555 } 556 557 558 //find the absolute position 559 Calendar.prototype.getAbsPoint = function (e){ 560 var x = e.offsetLeft; 561 var y = e.offsetTop; 562 while(e = e.offsetParent){ 563 x += e.offsetLeft; 564 y += e.offsetTop; 565 } 566 return {"x": x, "y": y}; 567 } 568 569 //显示日历 570 Calendar.prototype.show = function () { 571 var xy = this.getAbsPoint(this.dateControl); 572 this.panel.style.left = xy.x + "px"; 573 this.panel.style.top = (xy.y + this.dateControl.offsetHeight) + "px"; 574 this.setDisplayStyle("select", "hidden"); 575 this.panel.style.visibility = "visible"; 576 } 577 578 //Hide Calendar 579 Calendar.prototype.hide = function() { 580 this.setDisplayStyle("select", "visible"); 581 this.panel.style.visibility = "hidden"; 582 this.isFocus = false; 583 } 584 585 //Set Calendar Picker visible or invisible 586 Calendar.prototype.setDisplayStyle = function(tagName, style) { 587 var tags = this.getElementsByTagName(tagName) 588 for(var i = 0; i < tags.length; i++) { 589 if (tagName.toLowerCase() == "select" && 590 (tags[i].name == "calendarYear" || 591 tags[i].name == "calendarMonth")){ 592 continue; 593 } 594 tags[i].style.visibility = style; 595 } 596 } 597 598 document.write('<div id="calendarPanel" style="position:absolute;visibility:hidden;z-index:9999;background-color:#FFFFFF;font-size:12px;20px;">'); 599 document.write("<iframe id='calendarIframe' scrolling='no' frameborder='0' width='100%' height='100%'></iframe></div>");
使用方法：
在网页中引入js源文件：
<script type="text/javascript" src="<c:url value='/js/pub/DatePicker.js'/>"></script>
然后添加文本框属性：
<tr> <td class="one">出版时间</td> <td class="two"> <input type="text" onfocus="setday(this,'yyyy-MM-dd','2010-01-01','2010-12-30',1)" readonly="readonly" class="three" style="150px;" type="text" name="publishdate"> </td> </tr>
具体使用方法：
http://www.cnblogs.com/shenyixin/archive/2013/03/11/2954156.html
2.Ajax使用方法
以验证用户名密码为例：
function login(username,password) { var request; if(window.XMLHttpRequest){ request= new XMLHttpRequest(); }else{ request= new ActiveXObject("Microsoft.XMLHttp"); } var url="<c:url value='/admin/adminServlet?cmd=login&name="+username+"&password="+password+"'/>"; request.open("POST", url, true);//异步请求处理 request.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); request.send(); request.onreadystatechange=function() { //alert(request.readyState); if(request.readyState==4) { //alert(request.status); if(request.status==200) { changeCheckCode();//防止使用浏览器的回退功能。 alert("登录成功！");//登陆成功之后跳转到管理界面。 //跳转到的管理页面必须展现出该管理员应该具备的所有权限，体现出来的就是目录 window.location.href="<c:url value='/admin/adminServlet'/>";//使用默认方法显示主界面 } else { changeCheckCode(); alert("用户名或者密码错误！"); return; } } }; }
3.js去除两端空格
String.prototype.trim=function(){ var p = /^s*/; var str = this.replace(p,""); p = /s*$/; str = str.replace(p,""); return str; };