JS 日历控件（蓝色）

<！DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>超漂亮的JS日历控件</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> *{ 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> <script language="javascript"> // 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（/upload/2010-3/20100303234318708.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 = ""; 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+""; } 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 language="javascript"> 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> </head> <body onselectstart="return false"><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></body> </html>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]