个性化的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 十足采用 提醒：你可先窜改局部代码，再按运转]（根源：vipcn.com）