您的位置：首页 > Web前端 > JavaScript

js：日历控件

2007-01-20 21:41 501 查看

html代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>无标题文档</title>

</head>

<body>

<br>

</select>

</body>

</html>

calendar.js代码：

/**//* author: Li xuming */

/**//* Creation date: 2006-10-21 */

var myC_x,myC_y;

var myC_timeset=null,myC_timeset1=null;

var divObj=null;

var inputName;

var myCObj, myC_TopObj,myC_divObj;

/**//**

* 构建对象

function myCalendar()

...{

var myDate = new Date();

this.year = myDate.getFullYear(); //读取年，比如：2006

this.month = myDate.getMonth()+1; //读取月，比如：11

this.date = myDate.getDate(); //读取日，比如：27

this.format="yyyy-mm-dd";

this.style = myStyle(1);　

this.show = createCalendar;

this.input = createInput;

}

/**//**

* 设置样式

function myStyle(num)

...{

if(!num||isNaN(num))...{alert('参数不对,采用默认样式！');num=1;}

　var style = new Array();

style[1]=".week{background-color:#DfDfff;font-size:12px;width:100%;}"

+".ds{width:140px;font-size:12px;cursor:hand}"

+".mover{border:1px solid black;background-color:#f4f4f4;}"

+".move1{border:1px solid #5d5d5d;background-color:#f4f4f4;color:#909eff;font-size:12px}"

+".tit{background-color:#909EFF;width:100%;font-size:12px;color:white;cursor:default}"

+".cs{position:absolute;border:1px solid #909eff;width:142px;left:0px;top:0px;z-index:9999;}"

+".shadow{position:absolute;left:0px;top:0px;font-family: Arial Black;font-size:50px;color:#d4d4d4;z-index:1;text-align:center;}";

document.write("<style type='text/css'>");

document.write(style[num]);

document.write("</style>");

}

function createCalendar()

...{

var week = new Array('日','一','二','三','四','五','六');

document.write("<div class='cs' onselectstart='return false' oncontextmenu='return false' id='myC_div'>");

document.write("<div class='shadow'></div><div style='position:absolute;left:0px;top:0px;z-index:1'>");

//创建头部

document.write("<table class='tit' id='myC_Top' onmousemove='parent.myCMove(this.parentElement.parentElement);'><tr><td width=10 onmouseover='this.style.color="black"' onmouseout='this.style.color=""' onclick='parent.cutYear()' style='font-family: Webdings;cursor:hand;' title='减少年份'>7</td><td title='减少月份' onmouseover='this.style.color="black"' onclick='parent.cutMonth()' onmouseout='this.style.color=""' width=10 style='font-family: Webdings;cursor:hand;'>3</td><td align=center onmouseover=this.className='move1'; onmouseout=this.className='';></td><td align=center onmouseover=this.className='move1'; onmouseout=this.className='';></td><td width=10 onmouseover='this.style.color="black"' onmouseout='this.style.color=""' onclick='parent.addMonth()' style='font-family: Webdings;cursor:hand;' title='增加月份'>4</td><td width=10 style='font-family: Webdings;cursor:hand;' onmouseover='this.style.color="black"' onmouseout='this.style.color=""' onclick='parent.addYear()' title='增加年份'>8</td></tr></table>");

//创建星期条目

document.write("<table class='week'><tr>");

for(i=0;i<7;i++)

document.write("<td align=center>"+week[i]+"</td>");

document.write("</tr></table>");

//创建日期条目

document.write("<table class='ds' id='myC' cellspacing=2 cellpadding=0>");

for(i=0;i<6;i++)

...{

document.write("<tr>");

for(j=0;j<7;j++)...{

if(i==5)...{

if(j==5)...{

}else if(j==6)...{

document.write("<td colspan=2 width=10% height=16 align=center onmouseover='parent.mOver(this)' onmouseout='parent.mOut(this)' onclick='parent.myC_div.style.display="none"'></td>");

}else...{

document.write("<td width=10% height=16 align=center onmouseover='parent.mOver(this)' onmouseout='parent.mOut(this)' onclick='if(this.innerText!=""){parent.getValue(parent.inputName,this.innerText);parent.myC_div.style.display="none"}'></td>");

}

}else...{

}

document.write("</tr>");

}

document.write("</table>");

//建建水印

document.write("</div>");

//创建选择图层

document.write("<div style='position:absolute;left:0px;top:0px;z-index:3' onmouseover=divShow(this) onmouseout=divHidden(this)></div>");

document.write("</div>");

myCObj = myC;

myC_TopObj = myC_Top;

myC_divObj = myC_div;

//显示日期

showDate(this.year,this.month);

myC_divObj.style.display='none';

}

/**//**

* 显示日期值

* obj: 待显示的标单对象

* value: 具体的一天，比如：27（年，月通过"头部"读取）

function getValue(obj,value)

...{

var eventObj = document.getElementById(obj);

eventObj.value=parseInt(myC_TopObj.cells[2].innerText)+"-"+parseInt(myC_TopObj.cells[3].innerText)+"-"+value;

}

function showDate(year,month)

...{

var myDate = new Date(year,month-1,1);

var today = new Date();

var day = myDate.getDay();

var length = new Array(31,30,31,30,31,30,31,31,30,31,30,31);

length[1] = ((year%4==0)&&(year%100!=0)||(year%400==0))?29:28;

for(i=0;i<myCObj.cells.length;i++)...{

if(i == myCObj.cells.length-1)...{

myCObj.cells[i].innerHTML = "取消";

}else...{

myCObj.cells[i].innerHTML = "";

}

for(i=0;i<length[month-1];i++)

...{

myCObj.cells[i+day].innerHTML = (i+1);

if(new Date(year,month-1,i+1).getDay()==6||new Date(year,month-1,i+1).getDay()==0)...{myCObj.cells[i+day].style.color='red';}

}

myC_TopObj.cells[2].innerText=year+"年";

myC_TopObj.cells[3].innerText=month+"月";

with(myCObj.parentNode.previousSibling.style)

...{

pixelLeft=myCObj.offsetLeft;

pixelTop=myCObj.offsetTop;

height = myCObj.clientHeight;

width = myCObj.clientWidth;

}

myCObj.parentElement.parentElement.style.height=myCObj.parentElement.offsetHeight;

myCObj.parentElement.previousSibling.innerHTML=year;

}

//一些附加函数--------------------

//---------Begin-------------------

function mOver(obj)...{obj.className = 'mover';}

function mOut(obj)...{if(obj.className=='mover')obj.className = '';}

function addYear()...{var year = parseInt(myC_TopObj.cells[2].innerText);var month = parseInt(myC_TopObj.cells[3].innerText); year++;showDate(year,month);}

function addMonth()...{var year = parseInt(myC_TopObj.cells[2].innerText);var month = parseInt(myC_TopObj.cells[3].innerText);month++;if(month>12)...{month=1;year++;}showDate(year,month);}

function cutYear()...{var year = parseInt(myC_TopObj.cells[2].innerText);var month = parseInt(myC_TopObj.cells[3].innerText);year--;showDate(year,month);}

function cutMonth()...{var year = parseInt(myC_TopObj.cells[2].innerText);var month = parseInt(myC_TopObj.cells[3].innerText);month--;if(month<1)...{month=12;year--;}showDate(year,month);}

function divS(obj)

...{

if(obj!=divObj)

...{

obj.style.backgroundColor="#909eff";

obj.style.color='black';

}

if(divObj!=null)

...{

divObj.style.backgroundColor='';

divObj.style.color='';

}

divObj = obj;

}

function divShow(obj)

...{ if (myC_timeset!=null) clearTimeout(myC_timeset);

obj.style.display='block';

}

function divHidden(obj)

...{

myC_timeset=window.setTimeout(function()...{obj.style.display='none'},500);

}

/**//***********************************************************

* 创建年份选择

**********************************************************/

function createyear(year,obj)

...{

var ystr;

var oDiv;

ystr="<table class='move1' cellspacing=0 cellpadding=2 width="+obj.offsetWidth+">";

ystr+="<tr><td style='cursor:hand' onclick='createyear("+(year-20)+",myC_TopObj.cells[2])' align=center>上翻</td></tr>";

for(i=year-10;i<year+10;i++)

if(year==i)

ystr+="<tr style='background-color:#909eff'><td style='color:black;height:16px;cursor:hand' align=center onclick='myC_TopObj.cells[2].innerText=this.innerText;showDate("+i+",parseInt(myC_TopObj.cells[3].innerText));myCObj.parentElement.nextSibling.innerHTML=""'>"+i+"年</td></tr>";

else

ystr+="<tr><td align=center style='cursor:hand' onmouseover=divS(this) onclick='myC_TopObj.cells[2].innerText=this.innerText;showDate("+i+",parseInt(myC_TopObj.cells[3].innerText));myCObj.parentElement.nextSibling.innerHTML=""'>"+i+"年</td></tr>";

ystr+="<tr><td style='cursor:hand' onclick='createyear("+(year+20)+",myC_TopObj.cells[2])' align=center>下翻</td></tr>";

ystr+="</table>";

oDiv = myCObj.parentElement.nextSibling;

oDiv.innerHTML='';

oDiv.innerHTML = ystr;

showDiv(oDiv,obj.offsetTop+obj.offsetHeight,obj.offsetLeft);

}

//创建年份选择结束 *****************************************

/**//***********************************************************

* 创建月份选择

**********************************************************/

function createmonth(month,obj)

...{

var mstr;

var oDiv;

mstr="<table class='move1' cellspacing=0 cellpadding=2 width="+(obj.offsetWidth+5)+">";

for(i=1;i<13;i++)

if (month==i)

mstr+="<tr style='background-color:#909eff'><td style='color:black;height:16px;cursor:hand' align=center onclick='myC_TopObj.cells[3].innerText=this.innerText;showDate(parseInt(myC_TopObj.cells[2].innerText),"+i+");myCObj.parentElement.nextSibling.innerHTML=""'>"+i+"月</td></tr>";

else

mstr+="<tr><td align=center style='cursor:hand' onmouseover='divS(this)' onclick='myC_TopObj.cells[3].innerText=this.innerText;showDate(parseInt(myC_TopObj.cells[2].innerText),"+i+");myCObj.parentElement.nextSibling.innerHTML=""'>"+i+"月</td></tr>";

mstr+="</table>";

oDiv = myCObj.parentElement.nextSibling;

oDiv.innerHTML='';

oDiv.innerHTML = mstr;

showDiv(oDiv,obj.offsetTop+obj.offsetHeight,obj.offsetLeft);

}

//创建月份结束 *********************************************

function showDiv(obj,top,left)

...{

obj.style.pixelTop=top;

obj.style.pixelLeft=left;

}

function myCMove(obj)

...{

if(event != null && event.button==1)

...{

var X = obj.clientLeft;

var Y = obj.clientTop;

obj.style.pixelLeft= X+(event.x-myC_x);

obj.style.pixelTop= Y+(event.y-myC_y);

window.status=myC_y;

}

function showDiv2(obj)

...{

inputName=obj.name;

var e=obj;

var ot = obj.offsetTop;

var ol=obj.offsetLeft;

while(obj=obj.parentElement)...{ot+=obj.offsetTop;ol+=obj.offsetLeft;}

myC_divObj.style.pixelTop=event.y;

myC_divObj.style.pixelLeft=event.x;

myC_divObj.style.display="block";

if(document.getElementById("iframeDivObj") == null)...{

var iframeStyle=".week{background-color:#DfDfff;font-size:12px;width:100%;}"

+".ds{width:140px;font-size:12px;cursor:hand}"

+".mover{border:1px solid black;background-color:#f4f4f4;}"

+".move1{border:1px solid #5d5d5d;background-color:#f4f4f4;color:#909eff;font-size:12px}"

+".tit{background-color:#909EFF;width:100%;font-size:12px;color:white;cursor:default}"

+".cs{position:absolute;border:1px solid #909eff;width:142px;left:0px;top:0px;z-index:9999;}"

+".shadow{position:absolute;left:0px;top:0px;font-family: Arial Black;font-size:50px;color:#d4d4d4;z-index:1;text-align:center;}";

var shtml=myC_divObj.innerHTML;

var ifm=document.createElement("<iframe frameborder=0 marginheight=0 marginwidth=0 hspace=0 vspace=0 scrolling=no></iframe>")

ifm.style.width=myC_divObj.offsetWidth

ifm.style.height=myC_divObj.offsetHeight

ifm.name="iframeDivObj";

ifm.id="iframeDivObj";

myC_divObj.innerHTML=""

myC_divObj.appendChild(ifm)

window.frames[ifm.name].document.write("<style type='text/css'>")

window.frames[ifm.name].document.write(iframeStyle)

window.frames[ifm.name].document.write("</style>")

window.frames[ifm.name].document.write("<body leftmargin=0 topmargin=0>"+shtml+"</body>")

myCObj = iframeDivObj.myC;

myC_TopObj = iframeDivObj.myC_Top;

}

function createInput(name)

...{myC_divObj.style.display='none';

}

var myCalendar=new myCalendar;

myCalendar.show();

myCalendar.input("txt1");

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航