日历控件

最新推荐文章于 2025-08-06 11:25:40 发布

原创最新推荐文章于 2025-08-06 11:25:40 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#日历 #date #function #border #input #class

C# 专栏收录该内容

3 篇文章

订阅专栏

该博客主要展示了使用JavaScript实现日期选择器的代码。包含Mask.htc文件定义事件和函数，Mask.css文件设置样式，Test.htm文件进行测试。代码实现了日期选择、切换月份等功能，还对输入格式进行了验证。

有什么问题请留言！

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" class="clsDateView" onblur="this.style.display=/'none/'">'; inithtml+='<tr class="clsDateViewHeader">'; 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 class="clsDateViewWeek">'; 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 class="clsDateViewDay">'; 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); } } //鼠标移动上触发 function　InputMouseOver(){ element.className="clsInputMouseOver"; } //鼠标移出触发 function　InputMouseOut(){ 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

图例演示