js:日历控件

 html代码:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
< html >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >
< title > 无标题文档 </ title >
< script  language ="javascript"  src ="calendar.js" ></ script >
</ head >

< body >
< input  type ="text"  name ="textfield"  onClick ="showDiv2(this)" >
< br >
< select  name ="select" >
</ 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' οncοntextmenu='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' οnmοusemοve='parent.myCMove(this.parentElement.parentElement);'><tr><td width=10 οnmοuseοver='this.style.color="black"' οnmοuseοut='this.style.color=""' οnclick='parent.cutYear()' style='font-family: Webdings;cursor:hand;' title='减少年份'>7</td><td title='减少月份' οnmοuseοver='this.style.color="black"' οnclick='parent.cutMonth()' οnmοuseοut='this.style.color=""' width=10 style='font-family: Webdings;cursor:hand;'>3</td><td align=center οnmοuseοver=this.className='move1'; οnmοuseοut=this.className='';></td><td align=center οnmοuseοver=this.className='move1'; οnmοuseοut=this.className='';></td><td width=10 οnmοuseοver='this.style.color="black"' οnmοuseοut='this.style.color=""' οnclick='parent.addMonth()' style='font-family: Webdings;cursor:hand;' title='增加月份'>4</td><td width=10 style='font-family: Webdings;cursor:hand;' οnmοuseοver='this.style.color="black"' οnmοuseοut='this.style.color=""' οnclick='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 οnmοuseοver='parent.mOver(this)' οnmοuseοut='parent.mOut(this)' οnclick='parent.myC_div.style.display="none"'></td>");
                    }
else{
                        document.write(
"<td width=10% height=16 align=center οnmοuseοver='parent.mOver(this)' οnmοuseοut='parent.mOut(this)' οnclick='if(this.innerText!=""){parent.getValue(parent.inputName,this.innerText);parent.myC_div.style.display="none"}'></td>");
                    }

                }
else{
                    document.write(
"<td width=10% height=16 align=center οnmοuseοver='parent.mOver(this)' οnmοuseοut='parent.mOut(this)' οnclick='if(this.innerText!=""){parent.getValue(parent.inputName,this.innerText);parent.myC_div.style.display="none"}'></td>");
                }

            }

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

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

//建建水印
document.write("</div>");
//创建选择图层
document.write("<div style='position:absolute;left:0px;top:0px;z-index:3' οnmοuseοver=divShow(this) οnmοuseοut=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' οnclick='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 οnclick='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' οnmοuseοver=divS(this) οnclick='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' οnclick='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 οnclick='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' οnmοuseοver='divS(this)' οnclick='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 " );
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值