超漂亮的JS年历控件 _JavaScript

超漂亮的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(/jscss/demoimg/201002/right.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 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">
<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>
</html>