一个基于JS的日期选择控件
2007-10-24 19:00
555 查看
Calendar_HY.js
/**//* @version 2.0.2007.06.14 */
/**//* @version 1.0.2004.06.13 */
/**//* @auther alin */
/**//* Email:caoailin111@sohu.com */
/**//* @version 2.0.2007.06.14 */
/**//* @auther heroying */
/**//* Email:heroying@gmail.com */
/**//* 控件使用方法:
1. 页头加入代码:<script language='javascript' src="./Calendar_HY.js" /> (此处假设页面与本文件在同一目录,否者请自行修改引用路径。)
<script language='javascript'></script>
2. 触发控件中加入ONCLICK事件:onclick="showDiv2(this)"
如已存在ONCLICK事件则只要在调用的函数里直接调用 showDiv2(this); 即可。
*/
var myC_x,myC_y;
var myC_timeset=null,myC_timeset1=null;
var divObj=null;
var inputName;
//所要填充的文本框对象全局变量。add by heroying 20070612
var setObjectName;
//全局变量:父控件的X值和Y值
var gp_otop=0;
var gp_oleft=0;
//初始化日历
var myCalendar=new myCalendar;
myCalendar.show();
myCalendar.input("txt1");
//showDiv2(this)
function myCalendar() //构建对象
...{
var myDate = new Date();
this.year = myDate.getFullYear();
this.month = myDate.getMonth()+1;
this.date = myDate.getDate();
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:180px;}"
+".ds{width:180px;background-color:#f4f4f4;font-size:12px;cursor:hand}"
+".mover{border:1px solid #909EFF;background-color:#ffffff;}"
+".move1{border:1px solid #5d5d5d;background-color:#f4f4f4;color:#909eff;font-size:12px}"
+".tit{background-color:#909EFF;width:180px;font-size:12px;color:white;cursor:default}"
+".cs{position:absolute;border:1px solid #909eff;width:182px;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' onmousedown='if(event.button==2)this.style.display="none"' id='myC_div'><div class='shadow'></div><div style='position:absolute;left:0px;top:0px;z-index:1'>");
//创建头部
//增加“清楚内容”、“关闭窗口” 2个按钮。
document.write("<table class='tit' id='myC_Top' onmousedown='myC_x=event.x-parentNode.parentNode.style.pixelLeft;myC_y=event.y-parentNode.parentNode.style.pixelTop;setCapture()' onmouseup='releaseCapture();' onmousemove='myCMove(this.parentElement.parentElement);'><tr><td width=10 onmouseover='this.style.color="black"' onmouseout='this.style.color=""' onclick='cutYear()' style='font-family: Webdings;cursor:hand;' title='上一年份'>7</td><td title='上一月份' onmouseover='this.style.color="black"' onclick='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='';divHidden(myC.parentElement.nextSibling); onclick='createyear("+this.year+",this);divShow(myC.parentElement.nextSibling);'></td><td align=center onclick='createmonth("+this.month+",this);divShow(myC.parentElement.nextSibling)' onmouseover=this.className='move1'; onmouseout=this.className='';divHidden(myC.parentElement.nextSibling);></td><td width=10 onmouseover='this.style.color="black"' onmouseout='this.style.color=""' onclick='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='addYear()' title='下一年份'>8</td><td style='font-family: Webdings;cursor:hand;' onmouseover='this.style.color="red"' onmouseout='this.style.color=""' onclick='if(this.innerText!="")getValue(inputName,0);myC_div.style.display="none"' title='清除内容' >y</td><td style='font-family: Webdings;cursor:hand;' onmouseover='this.style.color="red"' onmouseout='this.style.color=""' onclick='closeDiv()' title='关闭' >r</td></tr></table>");
//创建星期条目
//修改星期条目支持拖动功能,并加入鼠标变为MOVE型效果。 modify by heroying 20070614
document.write("<table class='week' style='cursor:move' id='myC_WeekTop' onmousedown='myC_x=event.x-parentNode.parentNode.style.pixelLeft;myC_y=event.y-parentNode.parentNode.style.pixelTop;setCapture()' onmouseup='releaseCapture();' onmousemove='myCMove(this.parentElement.parentElement);'><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++)
document.write("<td width=10% height=16 align=center onmouseover='mOver(this)' onmouseout='mOut(this)' onclick='if(this.innerText!="")getValue(inputName,this.innerText);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' onmouseover=divShow(this) onmouseout=divHidden(this)></div>");
document.write("</div>");
//显示日期
showDate(this.year,this.month);
myC_div.style.display='none';
}
//add by heroying 20070613
function closeDiv()...{
myC_div.style.display='none';
}
//修改了返回格式为:20070101 modify by heroying 20070614
function getValue(obj,value)
...{
if(value==0)...{
eval(setObjectName).value="";
}else...{
var get_month = parseInt(myC_Top.cells[3].innerText);
var get_day = value;
get_month = get_month<10?"0"+get_month:get_month;
get_day = get_day<10?"0"+get_day:get_day;
//返回格式:20070101
eval(setObjectName).value = parseInt(myC_Top.cells[2].innerText)+""+get_month+get_day;
//返回格式:2007-1-1
//eval(setObjectName).value=parseInt(myC_Top.cells[2].innerText)+"-"+parseInt(myC_Top.cells[3].innerText)+"-"+value;
//重新显示时显示年份、月份更新为当前系统日期信息。add by heroying 20070612
var today = new Date();
myC_Top.cells[2].innerText = today.getYear()+"年";
myC_Top.cells[3].innerText = (today.getMonth()+1)+"月";
showDate(today.getYear(),today.getMonth()+1);
}
}
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<myC.cells.length;i++)myC.cells[i].innerHTML = "";
for(i=0;i<length[month-1];i++)
...{
myC.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)...{myC.cells[i+day].style.color='red';}
else...{myC.cells[i+day].style.color='#000000'}
//增加当前日期颜色变化(绿色) add by heroying 20070612
if(year==today.getYear()&&month==today.getMonth()+1)...{
if(new Date(year,month-1,i+1).getDate()==today.getDate())...{myC.cells[i+day].style.color='green';}
}
}
myC_Top.cells[2].innerText=year+"年";
myC_Top.cells[3].innerText=month+"月";
with(myC.parentNode.previousSibling.style)
...{
pixelLeft=myC.offsetLeft;
pixelTop=myC.offsetTop;
height = myC.clientHeight;
width = myC.clientWidth;
}
myC.parentElement.parentElement.style.height=myC.parentElement.offsetHeight;
myC.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_Top.cells[2].innerText);var month = parseInt(myC_Top.cells[3].innerText); year++;showDate(year,month);}
function addMonth()...{var year = parseInt(myC_Top.cells[2].innerText);var month = parseInt(myC_Top.cells[3].innerText);month++;if(month>12)...{month=1;year++;}showDate(year,month);}
function cutYear()...{var year = parseInt(myC_Top.cells[2].innerText);var month = parseInt(myC_Top.cells[3].innerText);year--;showDate(year,month);}
function cutMonth()...{var year = parseInt(myC_Top.cells[2].innerText);var month = parseInt(myC_Top.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_Top.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_Top.cells[2].innerText=this.innerText;showDate("+i+",parseInt(myC_Top.cells[3].innerText));myC.parentElement.nextSibling.innerHTML=""'>"+i+"年</td></tr>";
else
ystr+="<tr><td align=center style='cursor:hand' onmouseover=divS(this) onclick='myC_Top.cells[2].innerText=this.innerText;showDate("+i+",parseInt(myC_Top.cells[3].innerText));myC.parentElement.nextSibling.innerHTML=""'>"+i+"年</td></tr>";
ystr+="<tr><td style='cursor:hand' onclick='createyear("+(year+20)+",myC_Top.cells[2])' align=center>下翻</td></tr>";
ystr+="</table>";
oDiv = myC.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_Top.cells[3].innerText=this.innerText;showDate(parseInt(myC_Top.cells[2].innerText),"+i+");myC.parentElement.nextSibling.innerHTML=""'>"+i+"月</td></tr>";
else
mstr+="<tr><td align=center style='cursor:hand' onmouseover='divS(this)' onclick='myC_Top.cells[3].innerText=this.innerText;showDate(parseInt(myC_Top.cells[2].innerText),"+i+");myC.parentElement.nextSibling.innerHTML=""'>"+i+"月</td></tr>";
mstr+="</table>";
oDiv = myC.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.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;
}
}
//对原来不能准确定位DIV初始位置进行修正。modify by heroying 20070614
function showDiv2(obj)
...{
setObjectName = obj;
inputName=obj.name;
var e=obj;
//每次统计父控件X、Y值前先清空历史数据。
gp_otop = 0;
gp_oleft = 0;
//递归统计父控件X、Y值
GetParent(e);
//加上当前控件X、Y值
myC_div.style.pixelTop = gp_otop+setObjectName.offsetHeight+setObjectName.offsetTop;
myC_div.style.pixelLeft = gp_oleft+setObjectName.offsetLeft;
myC_div.style.display="block";
}
//递归查找父控件,并累计父控件的X值和Y值.add by heroying 20070614
function GetParent(obj)
...{
if(obj.offsetParent!=undefined)...{
gp_otop += obj.offsetParent.offsetTop;//累加y值
gp_oleft += obj.offsetParent.offsetLeft;//累加x值
GetParent(obj.offsetParent);//递归查找
}else...{
return;
}
}
function createInput(name)...{
myC_div.style.display='none';
document.write("<input type='hidden' name='Calendar_HY_init'>");
}
// --------------End ---------------------
一个页面范例test.html
<html>
<head>
<script src='./Calendar_HY.js'></script>
<script>...
var myCalendar=new myCalendar;
//myCalendar.year=2006;
myCalendar.show();
myCalendar.input("txt1");
</script>
</head>
<body >
<input type="text" name="test" onclick="showDiv2(this)" readonly=true>
<input type="text" name="test1" onclick="showDiv2(this)" readonly=true>
<input type="text" name="test2" onclick="showDiv2(this)" readonly=true>
<input type="text" name="test3" onfocus="showDiv2(this)" readonly=true>
<input type="text" name="test4" onfocus="showDiv2(this)" readonly=true>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<input type="text" name="bbbb" >
</body>
<html>
/**//* @version 2.0.2007.06.14 */
/**//* @version 1.0.2004.06.13 */
/**//* @auther alin */
/**//* Email:caoailin111@sohu.com */
/**//* @version 2.0.2007.06.14 */
/**//* @auther heroying */
/**//* Email:heroying@gmail.com */
/**//* 控件使用方法:
1. 页头加入代码:<script language='javascript' src="./Calendar_HY.js" /> (此处假设页面与本文件在同一目录,否者请自行修改引用路径。)
<script language='javascript'></script>
2. 触发控件中加入ONCLICK事件:onclick="showDiv2(this)"
如已存在ONCLICK事件则只要在调用的函数里直接调用 showDiv2(this); 即可。
*/
var myC_x,myC_y;
var myC_timeset=null,myC_timeset1=null;
var divObj=null;
var inputName;
//所要填充的文本框对象全局变量。add by heroying 20070612
var setObjectName;
//全局变量:父控件的X值和Y值
var gp_otop=0;
var gp_oleft=0;
//初始化日历
var myCalendar=new myCalendar;
myCalendar.show();
myCalendar.input("txt1");
//showDiv2(this)
function myCalendar() //构建对象
...{
var myDate = new Date();
this.year = myDate.getFullYear();
this.month = myDate.getMonth()+1;
this.date = myDate.getDate();
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:180px;}"
+".ds{width:180px;background-color:#f4f4f4;font-size:12px;cursor:hand}"
+".mover{border:1px solid #909EFF;background-color:#ffffff;}"
+".move1{border:1px solid #5d5d5d;background-color:#f4f4f4;color:#909eff;font-size:12px}"
+".tit{background-color:#909EFF;width:180px;font-size:12px;color:white;cursor:default}"
+".cs{position:absolute;border:1px solid #909eff;width:182px;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' onmousedown='if(event.button==2)this.style.display="none"' id='myC_div'><div class='shadow'></div><div style='position:absolute;left:0px;top:0px;z-index:1'>");
//创建头部
//增加“清楚内容”、“关闭窗口” 2个按钮。
document.write("<table class='tit' id='myC_Top' onmousedown='myC_x=event.x-parentNode.parentNode.style.pixelLeft;myC_y=event.y-parentNode.parentNode.style.pixelTop;setCapture()' onmouseup='releaseCapture();' onmousemove='myCMove(this.parentElement.parentElement);'><tr><td width=10 onmouseover='this.style.color="black"' onmouseout='this.style.color=""' onclick='cutYear()' style='font-family: Webdings;cursor:hand;' title='上一年份'>7</td><td title='上一月份' onmouseover='this.style.color="black"' onclick='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='';divHidden(myC.parentElement.nextSibling); onclick='createyear("+this.year+",this);divShow(myC.parentElement.nextSibling);'></td><td align=center onclick='createmonth("+this.month+",this);divShow(myC.parentElement.nextSibling)' onmouseover=this.className='move1'; onmouseout=this.className='';divHidden(myC.parentElement.nextSibling);></td><td width=10 onmouseover='this.style.color="black"' onmouseout='this.style.color=""' onclick='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='addYear()' title='下一年份'>8</td><td style='font-family: Webdings;cursor:hand;' onmouseover='this.style.color="red"' onmouseout='this.style.color=""' onclick='if(this.innerText!="")getValue(inputName,0);myC_div.style.display="none"' title='清除内容' >y</td><td style='font-family: Webdings;cursor:hand;' onmouseover='this.style.color="red"' onmouseout='this.style.color=""' onclick='closeDiv()' title='关闭' >r</td></tr></table>");
//创建星期条目
//修改星期条目支持拖动功能,并加入鼠标变为MOVE型效果。 modify by heroying 20070614
document.write("<table class='week' style='cursor:move' id='myC_WeekTop' onmousedown='myC_x=event.x-parentNode.parentNode.style.pixelLeft;myC_y=event.y-parentNode.parentNode.style.pixelTop;setCapture()' onmouseup='releaseCapture();' onmousemove='myCMove(this.parentElement.parentElement);'><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++)
document.write("<td width=10% height=16 align=center onmouseover='mOver(this)' onmouseout='mOut(this)' onclick='if(this.innerText!="")getValue(inputName,this.innerText);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' onmouseover=divShow(this) onmouseout=divHidden(this)></div>");
document.write("</div>");
//显示日期
showDate(this.year,this.month);
myC_div.style.display='none';
}
//add by heroying 20070613
function closeDiv()...{
myC_div.style.display='none';
}
//修改了返回格式为:20070101 modify by heroying 20070614
function getValue(obj,value)
...{
if(value==0)...{
eval(setObjectName).value="";
}else...{
var get_month = parseInt(myC_Top.cells[3].innerText);
var get_day = value;
get_month = get_month<10?"0"+get_month:get_month;
get_day = get_day<10?"0"+get_day:get_day;
//返回格式:20070101
eval(setObjectName).value = parseInt(myC_Top.cells[2].innerText)+""+get_month+get_day;
//返回格式:2007-1-1
//eval(setObjectName).value=parseInt(myC_Top.cells[2].innerText)+"-"+parseInt(myC_Top.cells[3].innerText)+"-"+value;
//重新显示时显示年份、月份更新为当前系统日期信息。add by heroying 20070612
var today = new Date();
myC_Top.cells[2].innerText = today.getYear()+"年";
myC_Top.cells[3].innerText = (today.getMonth()+1)+"月";
showDate(today.getYear(),today.getMonth()+1);
}
}
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<myC.cells.length;i++)myC.cells[i].innerHTML = "";
for(i=0;i<length[month-1];i++)
...{
myC.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)...{myC.cells[i+day].style.color='red';}
else...{myC.cells[i+day].style.color='#000000'}
//增加当前日期颜色变化(绿色) add by heroying 20070612
if(year==today.getYear()&&month==today.getMonth()+1)...{
if(new Date(year,month-1,i+1).getDate()==today.getDate())...{myC.cells[i+day].style.color='green';}
}
}
myC_Top.cells[2].innerText=year+"年";
myC_Top.cells[3].innerText=month+"月";
with(myC.parentNode.previousSibling.style)
...{
pixelLeft=myC.offsetLeft;
pixelTop=myC.offsetTop;
height = myC.clientHeight;
width = myC.clientWidth;
}
myC.parentElement.parentElement.style.height=myC.parentElement.offsetHeight;
myC.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_Top.cells[2].innerText);var month = parseInt(myC_Top.cells[3].innerText); year++;showDate(year,month);}
function addMonth()...{var year = parseInt(myC_Top.cells[2].innerText);var month = parseInt(myC_Top.cells[3].innerText);month++;if(month>12)...{month=1;year++;}showDate(year,month);}
function cutYear()...{var year = parseInt(myC_Top.cells[2].innerText);var month = parseInt(myC_Top.cells[3].innerText);year--;showDate(year,month);}
function cutMonth()...{var year = parseInt(myC_Top.cells[2].innerText);var month = parseInt(myC_Top.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_Top.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_Top.cells[2].innerText=this.innerText;showDate("+i+",parseInt(myC_Top.cells[3].innerText));myC.parentElement.nextSibling.innerHTML=""'>"+i+"年</td></tr>";
else
ystr+="<tr><td align=center style='cursor:hand' onmouseover=divS(this) onclick='myC_Top.cells[2].innerText=this.innerText;showDate("+i+",parseInt(myC_Top.cells[3].innerText));myC.parentElement.nextSibling.innerHTML=""'>"+i+"年</td></tr>";
ystr+="<tr><td style='cursor:hand' onclick='createyear("+(year+20)+",myC_Top.cells[2])' align=center>下翻</td></tr>";
ystr+="</table>";
oDiv = myC.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_Top.cells[3].innerText=this.innerText;showDate(parseInt(myC_Top.cells[2].innerText),"+i+");myC.parentElement.nextSibling.innerHTML=""'>"+i+"月</td></tr>";
else
mstr+="<tr><td align=center style='cursor:hand' onmouseover='divS(this)' onclick='myC_Top.cells[3].innerText=this.innerText;showDate(parseInt(myC_Top.cells[2].innerText),"+i+");myC.parentElement.nextSibling.innerHTML=""'>"+i+"月</td></tr>";
mstr+="</table>";
oDiv = myC.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.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;
}
}
//对原来不能准确定位DIV初始位置进行修正。modify by heroying 20070614
function showDiv2(obj)
...{
setObjectName = obj;
inputName=obj.name;
var e=obj;
//每次统计父控件X、Y值前先清空历史数据。
gp_otop = 0;
gp_oleft = 0;
//递归统计父控件X、Y值
GetParent(e);
//加上当前控件X、Y值
myC_div.style.pixelTop = gp_otop+setObjectName.offsetHeight+setObjectName.offsetTop;
myC_div.style.pixelLeft = gp_oleft+setObjectName.offsetLeft;
myC_div.style.display="block";
}
//递归查找父控件,并累计父控件的X值和Y值.add by heroying 20070614
function GetParent(obj)
...{
if(obj.offsetParent!=undefined)...{
gp_otop += obj.offsetParent.offsetTop;//累加y值
gp_oleft += obj.offsetParent.offsetLeft;//累加x值
GetParent(obj.offsetParent);//递归查找
}else...{
return;
}
}
function createInput(name)...{
myC_div.style.display='none';
document.write("<input type='hidden' name='Calendar_HY_init'>");
}
// --------------End ---------------------
一个页面范例test.html
<html>
<head>
<script src='./Calendar_HY.js'></script>
<script>...
var myCalendar=new myCalendar;
//myCalendar.year=2006;
myCalendar.show();
myCalendar.input("txt1");
</script>
</head>
<body >
<input type="text" name="test" onclick="showDiv2(this)" readonly=true>
<input type="text" name="test1" onclick="showDiv2(this)" readonly=true>
<input type="text" name="test2" onclick="showDiv2(this)" readonly=true>
<input type="text" name="test3" onfocus="showDiv2(this)" readonly=true>
<input type="text" name="test4" onfocus="showDiv2(this)" readonly=true>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<input type="text" name="bbbb" >
</body>
<html>
相关文章推荐
- js 跨域的问题 (同一个主域名不同的二级域名下的跨域问题) 解决 WdatePicker.js my97日期选择控件
- 一个好用的JS日期选择控件
- 发布一个的Web日期选择控件及源码(其中的js代码来自于Microsoft CRM)
- JS写的一个日期选择控件(移动网页的),写得不当的地方,望各位大神指正
- 一个非常好的JS日期选择控件
- bootstrap-datetimepicker:基于twitter bootstrap的日期/时间选择控件
- 发现了一个可以选择日期和时间的控件,我做了部分的修改,以适合我的项目,有兴趣的可以下载
- WdatePicker.js日期选择控件
- 一个基于面向对象设计的JS控件库 -- FDUI
- 给大家一个js的日期控件,非常好用.附例子.
- [转]JS日期选择控件
- 简洁JS 日历控件 支持日期和月份选择(转)
- DatePicker - 基于jQuery 1.7的日期选择控件
- 带时间选择的JS日期控件
- 带时间选择得JS日期控件
- Android笔记--一个上下滑动,还算看的过眼的日期、时间选择控件
- 超简洁的js 日期选择控件
- 简洁JS 日历控件 支持日期和月份选择
- 福利到~分享一个基于jquery的智能提示控件intellSeach.js
- JS日期和时间选择控件