您目前尚未登陆,请选择【登陆】或【注册
首页->控件插件->51aspx日期控件演示及源码>>51aspxResource/Calendar.js>>代码在线查看
温馨提示:代码在线浏览功能只能做为源码浏览参考,不能展示项目的全部,如果想更进一步了解该代码请下载:51aspx日期控件演示及源码


当前文件路径:CalendarDemo/51aspxResource/Calendar.js 文件类型
普通视图
		            
1<!-- 2var mainIFrame = null; 3var exIFrame = null; 4 5var tableDate = null; 6var imgCurrent = null; 7var _bCanHide = true; 8var _bHaveUpdated = false; 9var _bHaveShown = false; 10 11var _bHaveSelectNewValue = false; 12 13var pressWhickTextBox =null; 14 15// 声明 年、月、日、时、分 的变量 16//51aspx 17 18var _dCurYear = null; 19var _dCurMonth = null; 20var _dCurDay = null; 21var _dCurHour = null; 22var _dCurMinute= null; 23 24var objDate =null; 25var objYear =null; 26var objMonth=null; 27var objDay =null; 28var objHour =null; 29var objMinute =null; 30 31var dateValue = ""; 32var dateName =""; 33var strMonth =""; 34var strYear =""; 35var isReSet = false; 36 37var iWidth = 330; // 日历的宽度 38 39 40var iHeight= 166; // 日历的高度 (不可变) 41 42var _nShadowLength = 8; 43 44var _sNeededFilePath = _DatePickerImagePath; 45 46var _sBrowserVersion = navigator.appVersion.substring(navigator.appVersion.indexOf("MSIE") + 5,navigator.appVersion.indexOf("Windows") - 2); 47var ieVer55 = _sBrowserVersion >= 5.5 ? true : false; 48 49// 定义所需图片 50var imageReset1 = new Image(); 51 imageReset1.src = _sNeededFilePath + "reset1.gif"; 52var imageReset2 = new Image(); 53 imageReset2.src = _sNeededFilePath + "reset2.gif"; 54var imageUpDownYear = new Image(); 55 imageUpDownYear.src = _sNeededFilePath + "btnYears.gif"; 56var imageToday1 = new Image(); 57 imageToday1.src = _sNeededFilePath + "bgToday1.gif"; 58var frameCssPath = _DatePickerCssPath; 59 60var _monthDays = new Array(12); 61 _monthDays[ 0] = 31; 62 _monthDays[ 1] = 28; 63 /* 64 bug:未考虑润年2月份可以为29天的情况 ----find by 翟雪东 65 */ 66 _monthDays[ 2] = 31; 67 _monthDays[ 3] = 30; 68 _monthDays[ 4] = 31; 69 _monthDays[ 5] = 30; 70 _monthDays[ 6] = 31; 71 _monthDays[ 7] = 31; 72 _monthDays[ 8] = 30; 73 _monthDays[ 9] = 31; 74 _monthDays[10] = 30; 75 _monthDays[11] = 31; 76 77var _weeks = new Array(7); 78 _weeks[0] = ""; 79 _weeks[1] = ""; 80 _weeks[2] = ""; 81 _weeks[3] = ""; 82 _weeks[4] = ""; 83 _weeks[5] = ""; 84 _weeks[6] = ""; 85 86var _months = new Array(12); 87 _months[ 0] = "1"; 88 _months[ 1] = "2"; 89 _months[ 2] = "3"; 90 _months[ 3] = "4"; 91 _months[ 4] = "5"; 92 _months[ 5] = "6"; 93 _months[ 6] = "7"; 94 _months[ 7] = "8"; 95 _months[ 8] = "9"; 96 _months[ 9] = "10"; 97 _months[10] = "11"; 98 _months[11] = "12"; 99 100var defaultDate = new Date(); 101 102 103var _docClick = null; 104function GetCalendar(imgClick,name, year, month, day){ 105 if(_bHaveUpdated && imgClick == imgCurrent) return; 106 107 _docClick = document.onclick; 108 document.onclick = hideCldTabFrm; 109 110 objYear =document.getElementById(name + "_year"); 111 objMonth=document.getElementById(name + "_month"); 112 objDay =document.getElementById(name + "_day"); 113 objHour =document.getElementById(name + "_hour"); 114 objMinute=document.getElementById(name + "_minute"); 115 objDate =document.getElementById(name); 116 117 exIFrame = document.all("iFrmCalendar"); 118 exIFrame.style.position = "absolute"; 119 120 dateValue = objDate.value; 121 _bHaveSelectNewValue = false; 122 123 this.hidDate = (imgClick == null ? document.body : imgClick); 124 var _oldDate = objDate.value; 125 126 var _tmpDate = getValidateDate(_oldDate); 127 this._year = _tmpDate.getFullYear(); 128 this._month = _tmpDate.getMonth(); 129 this._day = _tmpDate.getDate(); 130 131 _dCurYear = this._year; 132 _dCurMonth = this._month; 133 _dCurDay = this._day; 134 135 _dCurHour = (objHour==null) ? null : (objHour.value=="" ? 0 : parseInt(objHour.value)); 136 _dCurMinute = (objMinute==null) ? null : (objMinute.value=="" ? 0 : parseInt(objMinute.value) ); 137 138 if(tableDate == null) 139 { 140 this.createFrame(); 141 InitDropMonth(); 142 InitDropYear(true); 143 } 144 exIFrame.style.display = "inline"; 145 if(!_bHaveShown || imgClick != imgCurrent) this.Orientation(); 146 147 this.fillCldTabFrm(this._year, this._month, this._day); 148 149 150 if(!ieVer55){ 151 removeShadowDiv(); 152 MakeDivShadowEffect(tableDate, '#aaaaaa', _nShadowLength); 153 } 154 imgCurrent = imgClick; 155 156 _bHaveUpdated = true; 157 _bHaveShown = true; 158} 159 160 161function createFrame(){ 162 // HTML的基本信息(head body) 163 var _sz = "<HTML>" 164 + "<HEAD><link href='" + frameCssPath +"' rel=stylesheet type='text/css'>" 165 + "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=gb2312\"></HEAD>" 166 + "<BODY onselectstart='return false;' leftmargin=0 topmargin=0 rightmargin=0 bottommargin=0 style='cursor:default;background-color:transparent;border:0px solid black;scroll:no'>" 167 + "</BODY></HTML>"; 168 169 mainIFrame = iFrmCalendar; 170 171 if(ieVer55) 172 exIFrame.style.filter = "progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#aaaaaa,strength=" + _nShadowLength + ")"; 173 174 mainIFrame.document.open("text/html","replace"); 175 mainIFrame.document.write(_sz); 176 mainIFrame.document.close(); 177 178 // table   179 tableDate = mainIFrame.document.createElement("TABLE"); 180 mainIFrame.document.body.insertBefore(tableDate); 181 exIFrame.style.display = "inline"; 182 exIFrame.style.zIndex = "10"; 183 184 tableDate.id = "GreatCalendar" 185 tableDate.style.position = "absolute"; 186 tableDate.className = "calendar"; 187 tableDate.border = 0; 188 189 tableDate.style.pixelWidth = iWidth ; 190 tableDate.cellSpacing = 1; 191 tableDate.cellPadding = 1; 192 tableDate.bgColor = "ffffff"; 193 tableDate.attachEvent("onmouseover", whenMouseOverCldTabFrm); 194 tableDate.attachEvent("onmouseout", whenMouseOutCldTabFrm); 195 196 var _TR = tableDate.insertRow(); 197 var _TD = _TR.insertCell(); 198 _TD.colSpan = 7; 199 _TD.align = "center"; 200 _TD.innerHTML = "&nbsp;"; 201 // 关键部份 7*7 202 for(var i = 0; i < 7; i++){ 203 _TR = tableDate.insertRow(); 204 for(var j = 0; j < 7; j++){ 205 _TD = _TR.insertCell(); 206 _TD.style.cursor = "default"; 207 _TD.align = "center"; 208 _TD.width = 50; 209 _TD.innerHTML = "*"; 210 if(i != 0){ 211 _TD.style.cursor = "hand"; 212 _TD.attachEvent("onmouseover", whenMouseOverDateItem); 213 _TD.attachEvent("onmouseout", whenMouseOutDateItem); 214 _TD.attachEvent("onclick", whenClickDateItem); 215 } 216 if(i == 0) _TD.innerHTML = "<b>" + _weeks[j] + "</b>"; 217 if(i == 0 && (j == 0 || j == 6)) _TD.className = "tdHoliday"; 218 } 219 } 220 // 最后一行(today cancel) 221 _TR = tableDate.insertRow(2); 222 _TD = _TR.insertCell(); 223 _TD.colSpan = 7; 224 _TD.height = 1; 225 _TD.bgColor = "black"; 226 _TR = tableDate.insertRow(); 227 _TD = _TR.insertCell(); 228 _TD.colSpan = 7; 229 _TD.innerHTML = "<table cellspacing=0 cellpadding=0 class=calendar style='border:0px solid;width:100%'>" 230 + "<tr><td width=160 title= '转到今天 | Switch to today.'style='cursor:hand'onclick=\"parent._bHaveSelectNewValue=true;parent.setTargetFormaValue(" + defaultDate.getFullYear() + "," + (defaultDate.getMonth()) + "," + defaultDate.getDate() + ");parent.hideCldTabFrm();return;parent.fillCldTabFrm(" + defaultDate.getFullYear() + "," + defaultDate.getMonth() + "," + defaultDate.getDate() +");\">" 231 + "<b>&nbsp;<img src='" + imageToday1.src + "' width=30px> 今 天 : " + defaultDate.getFullYear() + "-" + (defaultDate.getMonth() + 1) + "-" + defaultDate.getDate() 232 + "</td>" 233 + "<td width=30>" 234 + "<img style='cursor:hand' onclick=parent.resetTargetValue() title='清空日期 | clear the target value.' src='" + imageReset1.src + "' onmouseover=this.src='" + imageReset2.src + "' onmouseout=this.src='" + imageReset1.src + "'></td>" 235 + "<td>&nbsp;&nbsp;</td></tr></table>"; 236 237} 238 239function InitDropMonth() 240{ 241 strMonth =" <select valign=\"top\" id=\"dropMonth\" onmouseout='parent.HideMonthDrop();' onchange=\"return parent.ChangeMonth(this);\" style=\"display:none;FONT-SIZE:12px;WIDTH:70px;HEIGHT:20px\" accesskey=\"M\" bordercolor=\"#e0e3f7\">"+ 242 "<OPTION class='dropItem' value =\"0\" selected>一月</OPTION>"+ 243 "<OPTION class='dropItem' value =\"1\">二月</OPTION>"+ 244 "<OPTION class='dropItem' value =\"2\">三月</OPTION>"+ 245 "<OPTION class='dropItem' value =\"3\">四月</OPTION>"+ 246 "<OPTION class='dropItem' value =\"4\">五月</OPTION>"+ 247 "<OPTION class='dropItem' value =\"5\">六月</OPTION>"+ 248 "<OPTION class='dropItem' value =\"6\">七月</OPTION>"+ 249 "<OPTION class='dropItem' value =\"7\">八月</OPTION>"+ 250 "<OPTION class='dropItem' value =\"8\">九月</OPTION>"+ 251 "<OPTION class='dropItem' value =\"9\">十月</OPTION>"+ 252 "<OPTION class='dropItem' value =\"10\">十一月</OPTION>"+ 253 "<OPTION class='dropItem' value =\"11\">十二月</OPTION>"+ 254 "</select>"; 255} 256 257function InitDropYear(isFirstTime) 258{ 259 var year = parseInt(_dCurYear); 260 if(isFirstTime) 261 { 262 strYear =" <select valign=\"top\" id=\"dropYear\" onmouseout='parent.HideYearDrop();' onchange=\"return parent.ChangeYear(this);\" style=\"display:none;FONT-SIZE:12px;WIDTH:70px;HEIGHT:20px\" accesskey=\"M\" bordercolor=\"#e0e3f7\">" 263 strYear +="</select>"; 264 } 265 else 266 { 267 for(var i = year -25;i< year +10;i++) 268 { 269 var item = mainIFrame.document.createElement("option"); 270 mainIFrame.dropYear.options.add(item); 271 item.innerText =i+ ""; 272 item.value = i; 273 item.className ="dropItem"; 274 if(year ==i) 275 item.selected =true; 276 } 277 } 278 } 279 280function fillCldTabFrm(year, month, day){ 281 var dCurDate = 0; 282 var dNextMonthDate = 1; 283 var iDateStartRow = 3; 284 var _d = new Date(year, month, 1); 285 var _day = _d.getDay(); 286 var _td = null; 287 288 _dCurYear = year; 289 _dCurMonth = month; 290 _dCurDay = day; 291 292 if (((_dCurYear % 4 == 0) && !(_dCurYear % 100 == 0)) 293 ||(_dCurYear % 400 == 0)) _monthDays[1] = 29; 294 else _monthDays[1] = 28; 295 296 297 // 初始化头 (年月部份) 298 tableDate.rows(0).cells(0).innerHTML 299 = "<table bgcolor=#420042 class=calendar style=\"color:white;font-weight:bolder;border:0px solid;width:100%;height:20px;\" cellspacing=0 cellpadding=0>" 300 + "<tr><td width=10% height=22>" 301 + "&nbsp;<a style='cursor:hand' title='上月份' onclick=\"parent.switchLastMonth()\"><<</a>" 302 + "</td>" 303 + "<td align=right vAlign=middle width=40%>" 304 + strYear 305<