个性化的Calendar

大家对网页日历可能不陌生吧，但这么有个性的网页日历我还是第一次看到！

让我们看看starsjz为我们提供的个性化日历控件！

使用方法:用模态窗口调用,
var datastring = showmodaldialog("calendar.htm", "dd日mm月yyyy年" ,"dialogwidth:286px;dialogheight:221px;status:no;help:no;");

运行代码框
<title> - -选择日期 - -                                                                                                 </title><script> //*************************日历控件*************************** // cody by [star].sjz 2003-10-31 // 说明:返回值为一个字符串 // 格式如下: // 使用方法 : // var datastring = showmodaldialog("calendar.htm", "dd日mm月yyyy年" ,"dialogwidth:286px;dialogheight:221px;status:no;help:no;"); var userformatstring; if(window.dialogarguments ==null) { userformatstring = "yyyy-mm--dd"; } else { userformatstring = window.dialogarguments; } with(new date()){ var nyear = getyear(); var nmonth = getmonth() +1; var ndate = getdate(); } window.returnvalue = new dataobj(nyear,nmonth,ndate ).getdatestring(userformatstring); window.document.onclick = function(){ var obj = window.event.srcelement; if(obj.tagname.tolowercase() == "span" && obj.parentnode.classname.replace(/ctable/ig,"star") == "star" ) { try{ window.currentactiveitem.runtimestyle.csstext = ""; } catch(e){ } nyear = obj.id.split("-")[0]; nmonth = obj.id.split("-")[1]; ndate = obj.id.split("-")[2]; window.currentactiveitem = obj; window.currentselectdate = window.currentactiveitem.id; window.currentactiveitem.runtimestyle.csstext = "background:url(http://www.5d.cn/bbs/uploadfiles/2003-10/3120401281018.gif) no-repeat 12px 6px;color:#000;padding-top:1px;font-weight:bold"; } } function dataobj(year,month,date) { this.year = year this.month = month this.date = date this.getdatestring = function(formatstring) { return formatstring.replace(/yyyy/ig , this.year).replace(/mm/ig , this.month).replace(/dd/ig , this.date) } } window.onload = function(){ window.document.attachevent("onclick" , docmd); window.document.attachevent("onmouseover" , buttonover); window.document.attachevent("onmouseout" , buttonout); window.document.attachevent("onmousedown" , buttondown); window.document.attachevent("onmouseup" , buttonup); window.document.attachevent("ondblclick" , function() { var obj = window.event.srcelement; if(obj.tagname.tolowercase() == "span" && obj.parentnode.classname.replace(/ctable/ig,"star") == "star" ) { var mydate = new dataobj(obj.id.split("-")[0] , obj.id.split("-")[1] , obj.id.split("-")[2] ); window.returnvalue = mydate.getdatestring(userformatstring) window.close(); } } ); document.all.titleyear.innerhtml=tranyearmonthtitle(nyear,nmonth); document.all.weeknamebox.insertadjacenthtml("afterbegin",makeweeknamehtmlstr()); document.all.calendarbox.innerhtml=makecalendarhtmlstr(nyear,nmonth); window.currentselectdate = starcatran(nyear,nmonth,ndate); window.document.all.calendarbox.show = show; window.currentactiveitem = window.document.getelementbyid(currentselectdate); if( window.currentactiveitem ) window.currentactiveitem.click(); window.document.all.calendarbox.show(); } function starcalendar(year,month){ this.year = year; this.month = month; this.monthtable = function(){ var amonth=new array(); for(i=1;i<7;i++)amonth[i]=new array(i); var dcaldate=new date(this.year, this.month-1, 1); var idayoffirst=dcaldate.getday(); var idaysinmonth=new date(this.year, this.month, 0).getdate(); var ioffsetlast=new date(this.year, this.month-1, 0).getdate()-idayoffirst+1; var idate = 1; var inext = 1; for (d = 0; d < 7; d++) amonth[1][d] = (d<idayoffirst)?(-idayoffirst+d+1):idate++; for (w = 2; w < 7; w++) for (d = 0; d < 7; d++) amonth[w][d] = idate++; return amonth; } } function makeweeknamehtmlstr(){ var tmpstr=""; var weekname = ["日","一","二","三","四","五","六"]; for(var i=0;i<7;i++)tmpstr+="<span class=weekname>"+weekname[i]+"</span>"; return tmpstr; } function makecalendarhtmlstr(year,month){ window.thecalendar = new starcalendar(year,month); var thecaarr = thecalendar.monthtable(); var thedaysinmonth = new date(year, month, 0).getdate(); var thecahtml = "<div class=ctable>"; for(var i=1;i<7;i++) for(var j=0;j<7;j++) thecahtml = thecahtml+"<span class="+( (thecaarr[i][j]<1 || thecaarr[i][j]>thedaysinmonth)?"othermonthdate":"cdate")+" id="+starcatran(year,month,thecaarr[i][j])+">"+starcatran(year,month,thecaarr[i][j]).split("-")[2]+"</span>"; return thecahtml+"</div>"; } function starcatran(year,month,date){ with(new date(year,month-1,date)) return getyear() + "-" +(getmonth()+1) + "-" + getdate(); } function tranyearmonthtitle(year,month){ with(new date(year,month-1,1)) return "<span style=text-decoration:underline;cursor:hand;font-weight:bold;padding:1 2 0 1;width:40px; onclick=showmore(1940,2050,this.innerhtml) onmouseover=\"this.runtimestyle.csstext=color:#fff;\" onmouseout=\"this.runtimestyle.csstext=\" onpropertychange=showc()>" + getyear() + "</span>" + "年" + "<span style=text-decoration:underline;cursor:hand;font-weight:bold;padding:1 2 0 1;width:20px; onclick=showmore(1,12,this.innerhtml) onmouseover=\"this.runtimestyle.csstext=color:#fff;\" onmouseout=\"this.runtimestyle.csstext=\" onpropertychange=showc()>" + (getmonth()+1) + "</span>" + "月" ; } function showc(){ if(event.propertyname != "innerhtml")return; window.thecalendar.year = new number(document.all.titleyear.getelementsbytagname("span")[0].innerhtml); window.thecalendar.month = new number(document.all.titleyear.getelementsbytagname("span")[1].innerhtml); window.document.all.calendarbox.innerhtml=makecalendarhtmlstr(window.thecalendar.year,window.thecalendar.month); window.document.all.calendarbox.show = show;window.document.all.calendarbox.show(); } function showmore(starnum,endnum,selectedvalue){ var obj = window.event.srcelement; var selectedindex = selectedvalue - starnum; if(obj.selectbox){ obj.selectbox.selectedindex = selectedindex; return obj.selectbox.show(document.all.calendarbox.offsetheight + document.all.weeknamebox.offsetheight ); } var selectbox = window.document.createelement("div"); selectbox.classname = "selectbox"; selectbox.style.height = 0; selectbox.style.top = window.event.clienty - window.event.offsety + window.event.srcelement.offsetheight; selectbox.style.left = window.event.clientx - window.event.offsetx ; selectbox.show = showbox; selectbox.selectedindex = selectedindex; selectbox.onclick = function(){ var selectedobj = window.event.srcelement; if( "nobr" == selectedobj.tagname.tolowercase() && selectbox.contains(selectedobj)) { if(obj.innerhtml != selectedobj.innerhtml)obj.innerhtml = selectedobj.innerhtml; } } selectbox.onlosecapture = alert var istring = ""; for(var i=starnum;i<=endnum;i++){ istring += "<nobr onmouseover=\"this.parentnode.getelementsbytagname(nobr)[this.parentnode.selectedindex].style.csstext=;this.style.csstext=background-color:#00006c;color:#fff;\" onmouseout=this.style.csstext=>"+i+"</nobr><br>" } selectbox.insertadjacenthtml ("afterbegin",istring); window.document.body.appendchild(selectbox); obj.selectbox = selectbox; obj.selectbox.show(document.all.calendarbox.offsetheight + document.all.weeknamebox.offsetheight ); } function showbox(iheight) { var box = this; box.style.height =1; box.style.display = "block"; window.clearinterval(box.timehandle); box.timehandle = window.setinterval(intervalhandle,1); var s = 0,t =1 ; function intervalhandle() { box.scrolltop=1000000; s = s + t*t; t += 0.5; box.style.height = parseint(box.style.height) + math.floor(s); box.style.width = 65 / iheight * box.offsetheight; if( box.offsetheight > iheight ) { window.clearinterval(box.timehandle); box.style.height = iheight; box.scrolltop = box.childnodes[0].offsetheight*box.selectedindex; box.getelementsbytagname("nobr")[box.selectedindex].style.csstext=background-color:#00006c;color:#fff;; window.document.attachevent("onclick", box.hide=function() { box.style.display = "none"; window.document.detachevent("onclick",box.hide) } ); } } } </script> <script> function buttonover(){ var obj = window.event.srcelement; if(obj.tagname.tolowercase() == "span" && obj.classname.replace(/controlbutton/ig,"star") == "star" ) { obj.runtimestyle.csstext="border-color:#fff #606060 #808080 #fff;padding:3 0 0 0 "; } if(obj.tagname.tolowercase() == "span" && obj.parentnode.classname.replace(/ctable/ig,"star") == "star" ) { obj.style.backgroundcolor = "#fff"; } } function buttonout(){ var obj = window.event.srcelement; if(obj.tagname.tolowercase() == "span" && obj.classname.replace(/controlbutton/ig,"star") == "star" ) { obj.runtimestyle.csstext = ""; } if(obj.tagname.tolowercase() == "span" && obj.parentnode.classname.replace(/ctable/ig,"star") == "star" ) { window.settimeout(function(){obj.style.backgroundcolor = ""; },300); } } function buttondown(){ var obj = window.event.srcelement; if(obj.tagname.tolowercase() == "span" && obj.classname.replace(/controlbutton/ig,"star") == "star" ) { obj.setcapture(); obj.runtimestyle.bordercolor="#808080 #fefefe #fefefe #808080"; } } function buttonup(){ var obj = window.event.srcelement; if(obj.tagname.tolowercase() == "span" && obj.classname.replace(/controlbutton/ig,"star") == "star" ) { obj.releasecapture(); obj.runtimestyle.csstext =""; } } function docmd(){ var obj = window.event.srcelement; if(obj.tagname.tolowercase() == "span" && obj.classname.replace(/controlbutton/ig,"star") == "star" ) { switch(obj.getattribute("cmd")) { case "py": window.document.all.titleyear.innerhtml=window.tranyearmonthtitle(window.thecalendar.year-1,window.thecalendar.month); window.document.all.calendarbox.innerhtml=makecalendarhtmlstr(window.thecalendar.year-1,window.thecalendar.month); break; case "pm": window.document.all.titleyear.innerhtml=window.tranyearmonthtitle(window.thecalendar.year,window.thecalendar.month-1); window.document.all.calendarbox.innerhtml=makecalendarhtmlstr(window.thecalendar.year,window.thecalendar.month-1); break; case "nm": window.document.all.titleyear.innerhtml=window.tranyearmonthtitle(window.thecalendar.year,window.thecalendar.month+1); window.document.all.calendarbox.innerhtml=makecalendarhtmlstr(window.thecalendar.year,window.thecalendar.month+1); break; case "ny": window.document.all.titleyear.innerhtml=window.tranyearmonthtitle(window.thecalendar.year+1,window.thecalendar.month); window.document.all.calendarbox.innerhtml=makecalendarhtmlstr(window.thecalendar.year+1,window.thecalendar.month); break; } window.document.all.calendarbox.show(); window.currentselectdate = starcatran(nyear,nmonth,ndate); window.currentactiveitem = window.document.getelementbyid(currentselectdate); if( window.currentactiveitem )window.currentactiveitem.runtimestyle.csstext = "background:url(choiceit.gif) no-repeat 12px 6px;color:#000;padding-top:1px;font-weight:bold"; } } function show() { var box = this; window.cleartimeout(box.timehandle); var cdateboxs = this.getelementsbytagname("span"); for(var i=0;i<cdateboxs.length;i++) { cdateboxs[i].defaultvalue = new number( cdateboxs[i].innerhtml ); cdateboxs[i].innerhtml = 0; } showdate(); function showdate(){ for(var i=0;i<cdateboxs.length;i++){ if( new number( cdateboxs[i].innerhtml ) + 1 <= new number( cdateboxs[i].defaultvalue ) ) cdateboxs[i].innerhtml = new number( cdateboxs[i].innerhtml ) + 1 } box.timehandle = window.settimeout(showdate,1); } this.show = show1 } function show1() { var box = this; window.cleartimeout(box.timehandle); var cdateboxs = this.getelementsbytagname("span"); for(var i=0;i<cdateboxs.length;i++)cdateboxs[i].style.display = "none"; showdate(cdateboxs[0]); function showdate(obj){ if( !obj )return; obj.style.display = "inline"; box.timehandle = window.settimeout(function(){showdate(obj.nextsibling);},1); } this.show = show } /* function show() { } */ </script> <style> *{ font:12px; letter-spacing:0px; } body{ background-color:#e5e9f2; overflow:hidden; margin:0; border:0px; } #titleyear{ text-align:center; padding-top:3px; width:120px; height:20px; border:solid #e5e9f2; border-width:0px 1px 1px 0px; background-color:#a4b9d7; color:#000; cursor:default; } #weeknamebox{ width:282px; border-bottom:0; } .weekname{ text-align:center; padding-top:4px; width:40px; height:20px; border:solid #e5e9f2; border-width:0px 1px 1px 0px; background-color:#c0d0e8; color:#243f65; cursor:default; } .controlbutton{ font-family: webdings; font:9px; text-align:center; padding-top:2px; width:40px; height:20px; border:solid #e5e9f2; border-width:0px 1px 1px 0px; background-color:#a4b9d7; color:#243f65; cursor:default; } .ctable{ width:282px; margin-bottom:20px; } .ctable span{ font:9px verdana; font-weight:bold; color:#243f65; text-align:center; padding-top:4px; width:40px; height:26px; border:solid #c0d0e8; border-width:0px 1px 1px 0px; cursor:default; } .cdate{ background-color:#e5e9f2; } .ctable span.othermonthdate{ color:#999; background-color:#f6f6f6; } .selectbox{ cursor:hand; font:9px verdana; width:80px; position:absolute; border:1px solid #425e87; overflow-y:scroll; overflow-x:hidden; background-color:#fff; filter:progid:dximagetransform.microsoft.shadow(color=#999999,offx=10,offy=10,direction=120,strength=5); scrollbar-face-color: #e5e9f2; scrollbar-highlight-color: #e5e9f2; scrollbar-shadow-color: #a4b9d7; scrollbar-3dlight-color: #a4b9d7; scrollbar-arrow-color: #000000; scrollbar-track-color: #eeeee6; scrollbar-darkshadow-color: #ffffff; } .selectbox nobr{ padding:0px 0px 2px 5px; width:100%; color:#000; letter-spacing:2px; text-decoration:none; } </style> <body onselectstart="return false"> <div style="margin:0 0 0 0"> <div id=controlbar><span class=controlbutton cmd=py title=上一年>33</span><span class=controlbutton cmd=pm title=上一月>3</span><span id=titleyear></span><span class=controlbutton cmd=nm title=下一月>4</span><span class=controlbutton cmd=ny title=下一年>44</span></div> <div id=weeknamebox></div> <div id=calendarbox></div> </div> </body>
[ctrl+a 全部选择提示：你可先修改部分代码，再按运行]

（）

返回顶部

下一篇：关于ASP源码暴露的补丁 (MS,补丁) >>