日历控件 - 王朝网络宽屏版

使用时请在我的blog中留言！

Mask.htc

//©2004 Mini Corporation. mqk2002@hotmail.com<PUBLIC:EVENT NAME="onerror" ID="error"/><PUBLIC:ATTACH EVENT="ondocumentready" HANDLER="DoInit"/><PUBLIC:ATTACH EVENT="onmouseover" HANDLER="InputMouseOver"/><PUBLIC:ATTACH EVENT="onmouseout" HANDLER="InputMouseOut"/><script language="jscript">function click(){ if (!element.document.getElementById("oDateView")){ inithtml='<table border="0" width="200" cellspacing="0" cellpadding="0" height="145" id="oDateView" onblur="this.style.display=\'none\'">'; inithtml+='<tr inithtml+=' <td width="15%" align="middle" height="21" style="cursor: hand;"><<</td>'; inithtml+=' <td width="15%" align="middle" height="21" style="cursor: hand;"><</td>'; inithtml+=' <td width="14%" align="middle" height="21"></td>'; inithtml+=' <td width="14%" align="middle" height="21"></td>'; inithtml+=' <td width="14%" align="middle" height="21"></td>'; inithtml+=' <td width="14%" align="middle" height="21" style="cursor: hand;">></td>'; inithtml+=' <td width="14%" align="middle" height="21" style="cursor: hand;">>></td>'; inithtml+='</tr>'; inithtml+='<tr inithtml+=' <td width="15%" align="middle" height="21">日</td>'; inithtml+=' <td width="15%" align="middle" height="21">一</td>'; inithtml+=' <td width="14%" align="middle" height="21">二</td>'; inithtml+=' <td width="14%" align="middle" height="21">三</td>'; inithtml+=' <td width="14%" align="middle" height="21">四</td>'; inithtml+=' <td width="14%" align="middle" height="21">五</td>'; inithtml+=' <td width="14%" align="middle" height="21">六</td>'; inithtml+='</tr>'; for (i=3;i<9;i++){ inithtml+='<tr inithtml+=' <td width="15%" align="middle" height="21" style="cursor: hand;"></td>'; inithtml+=' <td width="15%" align="middle" height="21" style="cursor: hand;"></td>'; inithtml+=' <td width="14%" align="middle" height="21" style="cursor: hand;"></td>'; inithtml+=' <td width="14%" align="middle" height="21" style="cursor: hand;"></td>'; inithtml+=' <td width="14%" align="middle" height="21" style="cursor: hand;"></td>'; inithtml+=' <td width="14%" align="middle" height="21" style="cursor: hand;"></td>'; inithtml+=' <td width="14%" align="middle" height="21" style="cursor: hand;"></td>'; inithtml+='</tr>'; } inithtml+='</table>'; element.document.body.insertAdjacentHTML("beforeEnd",inithtml); oDateView.attachEvent("onclick",DateViewClick); oDateView.attachEvent("onmouseover",DateViewMouseOver); oDateView.attachEvent("onmouseout",DateViewMouseOut); element.document.attachEvent("onclick",DocumentClick); } window.activedate=value; window.activeobj=this; BuildDate(); DisplayDateView();}function DateViewClick(){ var e = window.event.srcElement switch (e.innerText){ case ">>": ChangeDate(12); break; case "<<": ChangeDate(-12); break; case ">": ChangeDate(1); break; case "<": ChangeDate(-1); break; default: if (e.style.cursor=="hand"){ year=new Date(Date.parse(e.value)).getFullYear(); month=new Date(Date.parse(e.value)).getMonth()+1; day=new Date(Date.parse(e.value)).getDate(); oDateView.style.display="none"; window.activeobj.value=year+"/"+month+"/"+day; } }}function DateViewMouseOver(){ var e = window.event.srcElement if ((e.style.cursor=="hand")){ e.className="clsDateViewDayOver"; }}function DateViewMouseOut(){ var e = window.event.srcElement if ((e.style.cursor=="hand")){ e.className=""; }}function ChangeDate(step){ year=new Date(Date.parse(window.activedate)).getFullYear(); month=new Date(Date.parse(window.activedate)).getMonth()+step; day=new Date(Date.parse(window.activedate)).getDate(); window.activedate=new Date(year,month,day); BuildDate();}function BuildDate() { if (window.activedate==""){ year=new Date().getFullYear(); month=new Date().getMonth(); day=new Date().getDate(); } else{ year=new Date(Date.parse(window.activedate)).getFullYear(); month=new Date(Date.parse(window.activedate)).getMonth(); day=new Date(Date.parse(window.activedate)).getDate(); } window.activedate=year+"/"+eval(month+1)+"/"+day; eval(oDateView).rows(0).cells(2).innerText=year; eval(oDateView).rows(0).cells(3).innerText=month+1; eval(oDateView).rows(0).cells(4).innerText=day; var lastdate=new Date(year,month,0); var date=new Date(year,month,1); var maxday=new Date(year,month+1,0).getDate(); for (var i=0;i<7;i++){ var cell=eval(oDateView).rows(2).cells(i); if (i<date.getDay()){ cell.innerText=lastdate.getDate()-date.getDay()+i+1; cell.style.color="#999999"; cell.value=new Date(year,month-1,(lastdate.getDate()-date.getDay()+i+1)); } else{ cell.innerText=i+1-date.getDay(); cell.style.color="#000000"; cell.value=new Date(year,month,i+1-date.getDay()); } } for(i=7;i<42;i++){ day=i+1-date.getDay(); var cell=eval(oDateView).rows(Math.floor(i/7)+2).cells(i%7); if (day<=maxday){ cell.innerHTML=day; cell.style.color="#000000"; cell.value=new Date(year,month,day); } else{ cell.innerHTML=day-maxday; cell.style.color="#999999"; cell.value=new Date(year,month+1,day-maxday); } } }function DisplayDateView(){ oDateView.style.left=getOffsetLeft(element); oDateView.style.top=getOffsetTop(element)+element.offsetHeight; if (oDateView.style.display="none"){ oDateView.style.display="block"; } else{ oDateView.style.display="none"; }}function DocumentClick(){ var e = window.event.srcElement; if (((e.tagName.toLowerCase() != "input")||((e.tagName.toLowerCase() == "input")&&(e.preset==null)))&&(!IsExists(e,oDateView))){ oDateView.style.display="none"; }}function IsExists(src,dst){ if (src.tagName!="BODY"){ if (src.parentElement==dst) return true; return IsExists(src.parentElement,dst) } return false;}function getOffsetLeft(src){ var set=0; if(src) { if (src.offsetParent) set+=src.offsetLeft+getOffsetLeft(src.offsetParent); if(src.tagName!="BODY") { var x=parseInt(src.scrollLeft,10); if(!isNaN(x)) set-=x; } } return set; }function getOffsetTop(src){ var set=0; if(src) { if (src.offsetParent) set+=src.offsetTop+getOffsetTop(src.offsetParent); if(src.tagName!="BODY") { var y=parseInt(src.scrollTop,10); if(!isNaN(y)) set-=y; } } return set;}//初始化控件function DoInit(){ var sTag = tagName.toLowerCase(); if (sTag == "input"){ attachEvent("onblur", InputBlur); if (this.preset=="date") attachEvent("onclick",click); } }//鼠标移动上触发functionInputMouseOver(){ element.className="clsInputMouseOver";}//鼠标移出触发functionInputMouseOut(){ element.className="clsInput";}function InputBlur() { if (value=="") return; switch(this.preset) { case "date": if (value=="") return var reg = /^[1-2]{1,1}[0-9]{3,3}[/]{1,1}[0-9]{1,2}[/]{1,1}[0-9]{1,2}$/; if (!reg.test(value)){ ReturnError("无效的日期格式"); } break; case "float": var reg = /^[0-9]{0,10}[.]{0,1}[0-9]{0,4}$/; if (!reg.test(value)){ ReturnError("无效的数字格式"); } break; case "email": var reg = /^\w+((-\w+)|(\.\w+))*\@\w+((\.|-)\w+)*\.\w+$/; if (!reg.test(value)){ ReturnError("无效的email格式"); } break; }}function ReturnError(sMsg){ var oEvent = createEventObject(); oEvent.setAttribute("error", sMsg); error.fire(oEvent); element.focus(); alert(sMsg);}</script>

Mask.css

.clsInput{ border: #999999 1px solid; background-color:#f5f5f1; font: 12px 宋体; width:95%; BEHAVIOR: url(Mask.htc);}.clsInputMouseOver{ border: #000000 1px solid; background-color:#fffff1; font: 12px 宋体; width:95%; BEHAVIOR: url(Mask.htc);}.clsDateView{ border: #999999 1px solid; font-size: 12px; background-color: #FFFFCC; TEXT-ALIGN: center; POSITION: absolute; left:auto; top:auto; width:200;}.clsDateViewHeader{ border:1px solid #3399FF; background-color: #990000; color:#FFFFCC}.clsDateViewWeek{ background-color: #FFCC66;color:#663399}.clsDateViewDay{ background-color: #FFFFCC;}.clsDateViewDayOver{ background-color: #FFCC66;}

Test.htm

图例演示

不知为什么不能上传图片了？？