标签：style blog http io ar color os 使用 sp
1 <!-- 2 /** 3 * Calendar 4 * @param beginYear 1990 5 * @param endYear 2010 6 * @param language 0(zh_cn)|1(en_us)|2(en_en)|3(zh_tw)|4(jp) 7 * @param patternDelimiter "-" 8 * @param date2StringPattern "yyyy-MM-dd" 9 * @param string2DatePattern "ymd" 10 * @version V20060401 11 * @version V20061217 12 * @version V20080809 add to google project 13 * @version V20081226 add language support for japanese 14 * @version V20090104 add fix some bugs in help.html 15 use style.display replace the style.visibility 16 some enhancements and changes 17 * @author KimSoft (jinqinghua [at] gmail.com) 18 * NOTE! you can use it free, but keep the copyright please 19 * IMPORTANT:you must include this script file inner html body elment 20 * @see http://code.google.com/p/kimsoft-jscalendar/ 21 */ 22 function Calendar(beginYear, endYear, language, patternDelimiter, date2StringPattern, string2DatePattern) { 23 24 this.beginYear = beginYear || 1990; 25 this.endYear = endYear || 2020; 26 this.language = language || 0; 27 this.patternDelimiter = patternDelimiter || "-"; 28 this.date2StringPattern = date2StringPattern || Calendar.language["date2StringPattern"][this.language].replace(/\-/g, this.patternDelimiter); 29 this.string2DatePattern = string2DatePattern || Calendar.language["string2DatePattern"][this.language]; 30 31 this.dateControl = null; 32 this.panel = this.getElementById("__calendarPanel"); 33 this.iframe = window.frames["__calendarIframe"]; 34 this.form = null; 35 36 this.date = new Date(); 37 this.year = this.date.getFullYear(); 38 this.month = this.date.getMonth(); 39 40 this.colors = {"bg_cur_day":"#00CC33","bg_over":"#EFEFEF","bg_out":"#FFCC00"} 41 }; 42 43 44 Calendar.language = { 45 "year" : ["\u5e74", "", "", "\u5e74","\u5e74"], 46 "months" : [ 47 ["\u4e00\u6708","\u4e8c\u6708","\u4e09\u6708","\u56db\u6708","\u4e94\u6708","\u516d\u6708","\u4e03\u6708","\u516b\u6708","\u4e5d\u6708","\u5341\u6708","\u5341\u4e00\u6708","\u5341\u4e8c\u6708"], 48 ["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"], 49 ["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"], 50 ["\u4e00\u6708","\u4e8c\u6708","\u4e09\u6708","\u56db\u6708","\u4e94\u6708","\u516d\u6708","\u4e03\u6708","\u516b\u6708","\u4e5d\u6708","\u5341\u6708","\u5341\u4e00\u6708","\u5341\u4e8c\u6708"], 51 ["\u4e00\u6708","\u4e8c\u6708","\u4e09\u6708","\u56db\u6708","\u4e94\u6708","\u516d\u6708","\u4e03\u6708","\u516b\u6708","\u4e5d\u6708","\u5341\u6708","\u5341\u4e00\u6708","\u5341\u4e8c\u6708"] 52 ], 53 "weeks" : [["\u65e5","\u4e00","\u4e8c","\u4e09","\u56db","\u4e94","\u516d"], 54 ["Sun","Mon","Tur","Wed","Thu","Fri","Sat"], 55 ["Sun","Mon","Tur","Wed","Thu","Fri","Sat"], 56 ["\u65e5","\u4e00","\u4e8c","\u4e09","\u56db","\u4e94","\u516d"], 57 ["\u65e5","\u6708","\u706b","\u6c34","\u6728","\u91d1","\u571f"], 58 ], 59 "clear" : ["\u6e05\u7a7a", "Clear", "Clear", "\u6e05\u7a7a", "\u524a\u9664"], 60 "today" : ["\u4eca\u5929", "Today", "Today", "\u4eca\u5929", "\u4eca\u65e5"], 61 "close" : ["\u5173\u95ed", "Close", "Close", "\u95dc\u9589", "\u623b\u308b"], 62 "date2StringPattern" : ["yyyy-MM-dd", "yyyy-MM-dd", "yyyy-MM-dd", "yyyy-MM-dd", "yyyy-MM-dd"], 63 "string2DatePattern" : ["ymd","ymd", "ymd", "ymd", "ymd"] 64 }; 65 66 Calendar.prototype.draw = function() { 67 calendar = this; 68 69 var _cs = []; 70 _cs[_cs.length] = ‘<form id="__calendarForm" name="__calendarForm" method="post">‘; 71 _cs[_cs.length] = ‘<table id="__calendarTable" width="100%" border="0" cellpadding="3" cellspacing="1" align="center">‘; 72 _cs[_cs.length] = ‘ <tr>‘; 73 _cs[_cs.length] = ‘ <th><input class="l" name="goPrevMonthButton" type="button" id="goPrevMonthButton" value="<" \/><\/th>‘; 74 _cs[_cs.length] = ‘ <th colspan="5"><select class="year" name="yearSelect" id="yearSelect"><\/select><select class="month" name="monthSelect" id="monthSelect"><\/select><\/th>‘; 75 _cs[_cs.length] = ‘ <th><input class="r" name="goNextMonthButton" type="button" id="goNextMonthButton" value=">" \/><\/th>‘; 76 _cs[_cs.length] = ‘ <\/tr>‘; 77 _cs[_cs.length] = ‘ <tr>‘; 78 79 for(var i = 0; i < 7; i++) { 80 _cs[_cs.length] = ‘<th class="theader">‘; 81 _cs[_cs.length] = Calendar.language["weeks"][this.language][i]; 82 _cs[_cs.length] = ‘<\/th>‘; 83 84 } 85 86 _cs[_cs.length] = ‘<\/tr>‘; 87 88 for(var i = 0; i < 6; i++){ 89 90 _cs[_cs.length] = ‘<tr align="center">‘; 91 92 for(var j = 0; j < 7; j++) { 93 94 switch (j) { 95 96 case 0: _cs[_cs.length] = ‘<td class="sun"> <\/td>‘; break; 97 case 6: _cs[_cs.length] = ‘<td class="sat"> <\/td>‘; break; 98 default:_cs[_cs.length] = ‘<td class="normal"> <\/td>‘; break; 99 100 } 101 } 102 _cs[_cs.length] = ‘<\/tr>‘; 103 104 } 105 _cs[_cs.length] = ‘ <tr>‘; 106 _cs[_cs.length] = ‘ <th colspan="2"><input type="button" class="b" name="clearButton" id="clearButton" \/><\/th>‘; 107 _cs[_cs.length] = ‘ <th colspan="3"><input type="button" class="b" name="selectTodayButton" id="selectTodayButton" \/><\/th>‘; 108 _cs[_cs.length] = ‘ <th colspan="2"><input type="button" class="b" name="closeButton" id="closeButton" \/><\/th>‘; 109 _cs[_cs.length] = ‘ <\/tr>‘; 110 _cs[_cs.length] = ‘<\/table>‘; 111 _cs[_cs.length] = ‘<\/form>‘; 112 113 this.iframe.document.body.innerHTML = _cs.join(""); 114 this.form = this.iframe.document.forms["__calendarForm"]; 115 116 this.form.clearButton.value = Calendar.language["clear"][this.language]; 117 this.form.selectTodayButton.value = Calendar.language["today"][this.language]; 118 this.form.closeButton.value = Calendar.language["close"][this.language]; 119 120 this.form.goPrevMonthButton.onclick = function () {calendar.goPrevMonth(this);} 121 this.form.goNextMonthButton.onclick = function () {calendar.goNextMonth(this);} 122 this.form.yearSelect.onchange = function () {calendar.update(this);} 123 this.form.monthSelect.onchange = function () {calendar.update(this);} 124 125 this.form.clearButton.onclick = function () {calendar.dateControl.value = "";calendar.hide();} 126 this.form.closeButton.onclick = function () {calendar.hide();} 127 128 this.form.selectTodayButton.onclick = function () { 129 var today = new Date(); 130 calendar.date = today; 131 calendar.year = today.getFullYear(); 132 calendar.month = today.getMonth(); 133 alert(today); 134 calendar.dateControl.value = today.format(calendar.date2StringPattern); 135 calendar.dateControl.value= seireki_to_wareki(calendar.dateControl.value); 136 137 calendar.hide(); 138 } 139 140 }; 141 142 Calendar.prototype.bindYear = function() { 143 var ys = this.form.yearSelect; 144 ys.length = 0; 145 for (var i = this.beginYear; i <= this.endYear; i++){ 146 147 ys.options[ys.length] = new Option(i + Calendar.language["year"][this.language], i); 148 } 149 }; 150 151 Calendar.prototype.bindMonth = function() { 152 var ms = this.form.monthSelect; 153 ms.length = 0; 154 for (var i = 0; i < 12; i++){ 155 ms.options[ms.length] = new Option(Calendar.language["months"][this.language][i], i); 156 } 157 }; 158 159 Calendar.prototype.goPrevMonth = function(e){ 160 if (this.year == this.beginYear && this.month == 0){return;} 161 this.month--; 162 if (this.month == -1) { 163 this.year--; 164 this.month = 11; 165 } 166 this.date = new Date(this.year, this.month, 1); 167 this.changeSelect(); 168 this.bindData(); 169 }; 170 171 Calendar.prototype.goNextMonth = function(e){ 172 if (this.year == this.endYear && this.month == 11){return;} 173 this.month++; 174 if (this.month == 12) { 175 this.year++; 176 this.month = 0; 177 } 178 this.date = new Date(this.year, this.month, 1); 179 this.changeSelect(); 180 this.bindData(); 181 }; 182 183 Calendar.prototype.changeSelect = function() { 184 var ys = this.form.yearSelect; 185 var ms = this.form.monthSelect; 186 for (var i= 0; i < ys.length; i++){ 187 if (ys.options[i].value == this.date.getFullYear()){ 188 ys[i].selected = true; 189 break; 190 } 191 } 192 for (var i= 0; i < ms.length; i++){ 193 if (ms.options[i].value == this.date.getMonth()){ 194 ms[i].selected = true; 195 break; 196 } 197 } 198 }; 199 200 Calendar.prototype.update = function (e){ 201 this.year = e.form.yearSelect.options[e.form.yearSelect.selectedIndex].value; 202 this.month = e.form.monthSelect.options[e.form.monthSelect.selectedIndex].value; 203 this.date = new Date(this.year, this.month, 1); 204 this.changeSelect(); 205 this.bindData(); 206 }; 207 208 Calendar.prototype.bindData = function () { 209 var calendar = this; 210 211 var dateArray = this.getMonthViewDateArray(this.date.getFullYear(), this.date.getMonth()); 212 var tds = this.getElementsByTagName("td", this.getElementById("__calendarTable", this.iframe.document)); 213 for(var i = 0; i < tds.length; i++) { 214 tds[i].style.backgroundColor = calendar.colors["bg_over"]; 215 tds[i].onclick = null; 216 tds[i].onmouseover = null; 217 tds[i].onmouseout = null; 218 tds[i].innerHTML = dateArray[i] || " "; 219 220 if (i > dateArray.length - 1) continue; 221 if (dateArray[i]){ 222 tds[i].onclick = function () { 223 if (calendar.dateControl){ 224 calendar.dateControl.value = new Date(calendar.date.getFullYear(), 225 calendar.date.getMonth(), 226 this.innerHTML).format(calendar.date2StringPattern); 227 228 calendar.dateControl.value= seireki_to_wareki(calendar.dateControl.value); 229 } 230 calendar.hide(); 231 } 232 tds[i].onmouseover = function () {this.style.backgroundColor = calendar.colors["bg_out"];} 233 tds[i].onmouseout = function () {this.style.backgroundColor = calendar.colors["bg_over"];} 234 var today = new Date(); 235 if (today.getFullYear() == calendar.date.getFullYear()) { 236 if (today.getMonth() == calendar.date.getMonth()) { 237 if (today.getDate() == dateArray[i]) { 238 tds[i].style.backgroundColor = calendar.colors["bg_cur_day"]; 239 tds[i].onmouseover = function () {this.style.backgroundColor = calendar.colors["bg_out"];} 240 tds[i].onmouseout = function () {this.style.backgroundColor = calendar.colors["bg_cur_day"];} 241 } 242 } 243 } 244 }//end if 245 }//end for 246 }; 247 248 Calendar.prototype.getMonthViewDateArray = function (y, m) { 249 var dateArray = new Array(42); 250 var dayOfFirstDate = new Date(y, m, 1).getDay(); 251 var dateCountOfMonth = new Date(y, m + 1, 0).getDate(); 252 for (var i = 0; i < dateCountOfMonth; i++) { 253 dateArray[i + dayOfFirstDate] = i + 1; 254 } 255 return dateArray; 256 }; 257 258 Calendar.prototype.show = function (dateControl, popuControl) { 259 if (this.panel.style.display == "block") { 260 this.panel.style.display = "none"; 261 } 262 if (!dateControl){ 263 throw new Error("arguments[0] is necessary!") 264 } 265 this.dateControl = dateControl; 266 popuControl = popuControl || dateControl; 267 268 this.draw(); 269 this.bindYear(); 270 this.bindMonth(); 271 if (dateControl.value.length > 0){ 272 var tmpdate = wareki_to_seireki(dateControl.value); 273 this.date = new Date(tmpdate.toDate(this.patternDelimiter, this.string2DatePattern)); 274 this.year = this.date.getFullYear(); 275 this.month = this.date.getMonth(); 276 } 277 this.changeSelect(); 278 this.bindData(); 279 280 var xy = this.getAbsPoint(popuControl); 281 this.panel.style.left = xy.x + "px"; 282 this.panel.style.top = (xy.y + dateControl.offsetHeight) + "px"; 283 this.panel.style.display = "block"; 284 }; 285 286 Calendar.prototype.hide = function() { 287 this.panel.style.display = "none"; 288 }; 289 290 Calendar.prototype.getElementById = function(id, object){ 291 object = object || document; 292 return document.getElementById ? object.getElementById(id) : document.all(id); 293 }; 294 295 Calendar.prototype.getElementsByTagName = function(tagName, object){ 296 object = object || document; 297 return document.getElementsByTagName ? object.getElementsByTagName(tagName) : document.all.tags(tagName); 298 }; 299 300 Calendar.prototype.getAbsPoint = function (e){ 301 var x = e.offsetLeft; 302 var y = e.offsetTop; 303 while(e = e.offsetParent){ 304 x += e.offsetLeft; 305 y += e.offsetTop; 306 } 307 return {"x": x, "y": y}; 308 }; 309 310 /** 311 * @param d the delimiter 312 * @param p the pattern of your date 313 * @author meizz 314 * @author kimsoft add w+ pattern 315 */ 316 Date.prototype.format = function(style) { 317 var o = { 318 "M+" : this.getMonth() + 1, //month 319 "d+" : this.getDate(), //day 320 "h+" : this.getHours(), //hour 321 "m+" : this.getMinutes(), //minute 322 "s+" : this.getSeconds(), //second 323 "w+" : "\u65e5\u4e00\u4e8c\u4e09\u56db\u4e94\u516d".charAt(this.getDay()), //week 324 "q+" : Math.floor((this.getMonth() + 3) / 3), //quarter 325 "S" : this.getMilliseconds() //millisecond 326 } 327 if (/(y+)/.test(style)) { 328 style = style.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); 329 } 330 for(var k in o){ 331 if (new RegExp("("+ k +")").test(style)){ 332 style = style.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length)); 333 } 334 } 335 return style; 336 }; 337 338 /** 339 * @param d the delimiter 340 * @param p the pattern of your date 341 * @rebuilder kimsoft 342 * @version build 2006.12.15 343 */ 344 String.prototype.toDate = function(delimiter, pattern) { 345 delimiter = delimiter || "-"; 346 pattern = pattern || "ymd"; 347 var a = this.split(delimiter); 348 var y = parseInt(a[pattern.indexOf("y")], 10); 349 //remember to change this next century ;) 350 if(y.toString().length <= 2) y += 2000; 351 if(isNaN(y)) y = new Date().getFullYear(); 352 var m = parseInt(a[pattern.indexOf("m")], 10) - 1; 353 var d = parseInt(a[pattern.indexOf("d")], 10); 354 if(isNaN(d)) d = 1; 355 return new Date(y, m, d); 356 }; 357 358 var divs = []; 359 divs[divs.length] = ‘<div id="__calendarPanel" style="position:absolute;display:none;background-color:#FFFFFF;border:1px solid #666666;width:200px;height:216px;">‘; 360 divs[divs.length] = ‘<iframe name="__calendarIframe" id="__calendarIframe" width="100%" height="100%" scrolling="no" frameborder="0" style="margin:0px;"><\/iframe>‘; 361 divs[divs.length] = ‘<\/div>‘; 362 document.write(divs.join("")); 363 364 var __ci = window.frames[‘__calendarIframe‘]; 365 var cis = []; 366 cis[cis.length] =‘<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN" "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd">‘; 367 cis[cis.length] =‘<html xmlns="http:\/\/www.w3.org\/1999\/xhtml">‘; 368 cis[cis.length] =‘<head>‘; 369 cis[cis.length] =‘<meta http-equiv="Content-Type" content="text\/html; charset=utf-8" \/>‘; 370 cis[cis.length] =‘<title>Web Calendar(UTF-8) Written By KimSoft<\/title>‘; 371 cis[cis.length] =‘<style type="text\/css">‘; 372 cis[cis.length] =‘<!--‘; 373 cis[cis.length] =‘body {font-size:12px;margin:0px;text-align:center;}‘; 374 cis[cis.length] =‘form {margin:0px;}‘; 375 cis[cis.length] =‘select {font-size:12px;background-color:#EFEFEF;}‘; 376 cis[cis.length] =‘table {border:0px solid #CCCCCC;background-color:#FFFFFF}‘; 377 cis[cis.length] =‘th {font-size:12px;font-weight:normal;background-color:#FFFFFF;}‘; 378 cis[cis.length] =‘th.theader {font-weight:normal;background-color:#666666;color:#FFFFFF;width:24px;}‘; 379 cis[cis.length] =‘select.year {width:64px;}‘; 380 cis[cis.length] =‘select.month {width:60px;}‘; 381 cis[cis.length] =‘td {font-size:12px;text-align:center;}‘; 382 cis[cis.length] =‘td.sat {color:#0000FF;background-color:#EFEFEF;}‘; 383 cis[cis.length] =‘td.sun {color:#FF0000;background-color:#EFEFEF;}‘; 384 cis[cis.length] =‘td.normal {background-color:#EFEFEF;}‘; 385 cis[cis.length] =‘input.l {border: 1px solid #CCCCCC;background-color:#EFEFEF;width:20px;height:20px;}‘; 386 cis[cis.length] =‘input.r {border: 1px solid #CCCCCC;background-color:#EFEFEF;width:20px;height:20px;}‘; 387 cis[cis.length] =‘input.b {border: 1px solid #CCCCCC;background-color:#EFEFEF;width:100%;height:20px;}‘; 388 cis[cis.length] =‘-->‘; 389 cis[cis.length] =‘<\/style>‘; 390 cis[cis.length] =‘<\/head>‘; 391 cis[cis.length] =‘<body>‘; 392 cis[cis.length] =‘<\/body>‘; 393 cis[cis.length] =‘<\/html>‘; 394 __ci.document.writeln(cis.join("")); 395 __ci.document.close(); 396 var calendar = new Calendar();
西历和历转换的js
1 // 西歴==>和暦 2 function seireki_to_wareki(str) { 3 if (str.length == 0) { 4 return ""; 5 } 6 var w_year; 7 var y = str.substring(0, 4); 8 if (y > 1988) { 9 w_year = "H" + (y - 1988); 10 } 11 if (y > 1925 && y < 1988) { 12 w_year = "S" + (y - 1925); 13 } 14 if (y > 1911 && y < 1925) { 15 w_year = "T" + (y - 1911); 16 } 17 if (y > 1867 && y < 1911) { 18 w_year = "M" + (y - 1867); 19 } 20 21 // date 22 var dt = w_year.replace("H", "平成").replace("S", "昭和").replace("T", "大正").replace("M", "明治") + "年" + str.substring(5, 7) + "月" + str.substring(8, 10) + "日"; 23 return dt; 24 } 25 26 // 和暦==>西歴 27 function wareki_to_seireki(str) { 28 29 str = str.replace("平成", "H").replace("昭和", "S").replace("大正", "T").replace("明治", "M"); 30 31 var m = str.substring(0, 1); 32 33 var dt; 34 var y = parseInt(str.substring(1, 3)); 35 36 // 平成 37 if ((m == "H") && (y > 0) && (y < 50)) { 38 dt = 1988 + y + "-" + str.substring(4, 6) + "-" + str.substring(7, 9); 39 } 40 // 昭和 41 if ((m == "S") && (y > 0) && (y < 65)) { 42 return 1925 + y + "-" + str.substring(4, 6) + "-" + str.substring(7, 9); 43 } 44 // 大正 45 if ((m == "T") && (y > 0) && (y < 16)) { 46 return 1911 + y + "-" + str.substring(4, 6) + "-" + str.substring(7, 9); 47 } 48 // 明治 49 if ((m == "M") && (y > 0) && (y < 46)) { 50 return 1867 + y + "-" + str.substring(4, 6) + "-" + str.substring(7, 9); 51 } 52 53 return dt; 54 }
使用的例子，上面的例子是由这个修改的
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>kimosft-jscalendar 开发文档</title> <style type="text/css"> <!-- body { font-family: "微软雅黑", Tahoma, Verdana; font-size: 12px; font-weight: normal; margin: 50px 10px; } span, label, p, input { font-family: "微软雅黑", Tahoma, Verdana; font-size: 12px; font-weight: normal; } form { margin: 0; padding: 0; } ul { margin: 0; } h1 { font-family: "微软雅黑", Tahoma, Verdana; font-size: 16px; font-weight: bold; } h2 { font-family: "微软雅黑", Tahoma, Verdana; font-size: 14px; font-weight: bold; } div.effect { border: 1px dotted #3C78B5; background-color: #D8E4F1; padding: 10px; width: 98%; } div.source { border: 1px solid #CCC;/*#090*/ background-color: #F5F5F5;/*#DFD*/ padding: 10px; width: 98%; } .color_red { color:#FF0000; } .b { font-weight: bold; } --> </style> </head> <body> <script type="text/javascript" src="calendar.js"></script> <form id="form1" name="form1" method="post" action=""> <h1>1、什么是 kimsoft-jscalendar ?</h1> <ul> <li>一个简洁的avaScript日历控件，可在Java Web 项目，.NET Web 项目中使用</li> </ul> <h1>2、kimsoft-jscalendar 有什么特点？</h1> <ul> <li>1、小巧，单文件 </li> <li>2、支持多语言，并可自由扩充（目前支持简体中文，繁体中文，英语美国和英语英国）</li> <li> 3、兼容ie6.0+, firefox1.0+, Opera9，其它浏览器未测试</li> <li>4、回显选定的时间，这是很多其它日历控件没有的 </li> <li>5、Apache license 2.0，商业友好。可免费使用，自由修改传播，但请保留版权信息</li> <li>6、用 iframe 解决 IE 中层在 select 控件上显示的问题</li> <li>7、其它特点有待发现...</li> </ul> <h1>3、版本:</h1> <ul> <li>V20081226（加了日文版本，感谢网友 yangyuqi[at]gmail.com 提供的日文翻译）</li> <li>V20080409（制作了此帮助文档） <a href="http://code.google.com/p/kimsoft-jscalendar/downloads/list" target="_blank">下载</a></li> <li>V20080322（第一次在Google Code上发布）</li> </ul> <h1>4、使用说明:</h1> <h2>4.1、将 js 文件导入到页面中（可以是 html, jsp, asp, aspx, php）等。</h2> <div class="source"><script type="text/javascript" src="calendar.js"></script></div> <br /> 注意以下点： <ul> <li> calendar.js 文件内容编写是UTF-8，请一定要将此文件的编码设置为UTF-8</li> <li> 上面的代码内容<span class="color_red b">一定要放在HTML的<body></body>之间</span>，特别是在符合XHTML规范的文档中</li> <li>包含此文件后，此页面已经自动实例化了一个日历对象 calendar，现在就可以使用了</li> </ul> <h2>4.2、一个最简单的例子<br /> </h2> <div class="source">用预定义的 calendar 对象生成日历代码：<input name="date" type="text" id="date" onclick=<strong>"calendar.show(this);</strong>" size="10" maxlength="10" readonly="readonly" /><br /> </div> <br /> <div class="effect">效果： <input name="date" type="text" id="date" onclick="calendar.show(this);" size="10" maxlength="10" readonly="readonly" /> </div> <br /> 当然也可以这样：<br /> </p> <div class="source">new 一个新的日历对象并生成日历代码：<input name="date" type="text" id="date" onclick=<strong>"new Calendar().show(this);</strong>" size="10" maxlength="10" readonly="readonly "/><br /> </div> <br /> <div class="effect">效果： <input name="date2" type="text" id="date2" onclick="new Calendar().show(this);" size="10" maxlength="10" readonly="readonly" /> </div> <br /> <h2>4.3、指定开始年份和结束年份的日历<br /> </h2> <div class="source"> 指定开始年份和结束年份的日历代码：<input name="range_date" type="text" id="range_date" onclick="new Calendar(2000, 2008).show(this);" size="10" maxlength="10" readonly="readonly" /><br /> </div> <br /> <div class="effect"> 只能选择 2000 到 2008年间的日期： <input name="range_date" type="text" id="range_date" onclick="new Calendar(2000, 2008).show(this);" size="10" maxlength="10" readonly="readonly" /> </div> <h2>4.4、多语言版本支持（可自由扩充），目前支持的语言：0(zh_cn)|1(en_us)|2(en_en)|3(zh_tw)</h2> <div class="source"> 中文日历代码： <input name="cn_date" type="text" id="cn_date" onclick="new Calendar().show(this);" size="10" maxlength="10" readonly="readonly" /><br /> </div> <br /> <div class="effect">中文日历效果： <input name="cn_date" type="text" id="cn_date" onclick="new Calendar().show(this);" size="10" maxlength="10" readonly="readonly"/> </div> <br /> <div class="source"> 繁体中文日历代码： <input name="tw_date" type="text" id="tw_date" onclick="new Calendar(null, null, 3).show(this);" size="10" maxlength="10" readonly="readonly" /><br /> </div> <br /> <div class="effect">繁体中文日历效果： <input name="tw_date" type="text" id="tw_date" onclick="new Calendar(null, null, 3).show(this);" size="10" maxlength="10" readonly="readonly" /> <br /> </div> <br /> <div class="source"> 英文日历代码： <input name="en_date" type="text" id="en_date" onclick="new Calendar(null, null, 1).show(this);" size="10" maxlength="10" readonly="readonly" /><br /> </div> <br /> <div class="effect">英文日历效果： <input name="en_date" type="text" id="en_date" onclick="new Calendar(null, null, 1).show(this);" size="10" maxlength="10" readonly="readonly" /> </div> <br /> <div class="source"> 日文日历代码： <input name="en_date" type="text" id="en_date" onclick="new Calendar(null, null, 4).show(this);" size="10" maxlength="10" readonly="readonly" /><br /> </div> <br /> <div class="effect">日文日历效果： <input name="en_date" type="text" id="en_date" onclick="new Calendar(null, null, 4).show(this);" size="10" maxlength="10" readonly="readonly" /> <span style="color:#F00; font-weight: bold;">（感谢网友 yangyuqi[at]gmail.com 提供的日文翻译）</span> </div> <h2>4.5、在一个控件上点击选择，在另外一个控件上显示日期</h2> <div class="source"> 代码：<br /> <input name="control_date" type="text" id="control_date"size="10" maxlength="10" readonly="readonly" /><br /> <input type="button" name="button" id="button" value="选择日期" onclick="new Calendar().show(this.form.control_date);" /><br /> </div> <br /> <div class="effect">效果： <input name="control_date" type="text" id="control_date"size="10" maxlength="10" readonly="readonly" /> <label> <input type="button" name="button" id="button" value="选择日期" onclick="new Calendar().show(this.form.control_date);" /> </label> </div> <h2>4.6、其它功能</h2> 其它功能请参考 calendar.js 源码，里面有详细的注释，本文档源码也是很好的代码资源，有问题请<a href="http://code.google.com/p/kimsoft-jscalendar/issues/list" target="_blank">提交ISSUES</a><br /> <h1>5、相关资源:</h1> <ul> <li>Google Code: <a href="http://code.google.com/p/kimsoft-jscalendar/" target="_blank">http://code.google.com/p/kimsoft-jscalendar/</a></li> <li>kimsoft‘s Blog: <a href="http://blog.csdn.net/kimsoft" target="_blank">http://blog.csdn.net/kimsoft</a></li> <li>kimsoft‘s Mail: <a href="mailto:jinqinghua@gmail.com">jinqinghua[at]gmail.com</a></li> </ul> <h1>6、License:</h1> <ul> <li>基于 Apache license 2.0，商业友好。可免费使用，自由修改传播，但请保留版权信息</li> </ul> </form> <script type="text/javascript"><!-- google_ad_client = "pub-4212279479115850"; /* 728x90, 创建于 08-12-23 */ google_ad_slot = "7934960061"; google_ad_width = 728; google_ad_height = 90; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </body> </html>
标签：style blog http io ar color os 使用 sp
原文地址：http://www.cnblogs.com/akatuki/p/4164398.html
