能够选择时间的 JS 日历时间输入控件

azheng270

浏览: 92998 次
性别:
来自: 杭州

最近访客更多访客>>

4351901

hitgnu

belldeep

xlwn

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (68)

社区版块

存档分类

IE J#

主调用函数是 setday(this,[object])和setday(this)，[object]是控件输出的控件名，举两个例子：
一、<input name=txt><input type=button value=setday onclick="setday(this,document.all.txt)">
二、<input onfocus="setday(this)">

手动调整了分和秒的初始值为0,也可手动调整回取现在时间得分和秒

//主调用函数是setday(this,[object])和setday(this)，[object]是控件输出的控件名，举两个例子：

//一、<inputname=txt><inputtype=buttonvalue=setdayonclick="setday(this,document.all.txt)">

//二、<inputonfocus="setday(this)">

varbMoveable=true;

varstrFrame;

document.writeln('<iframeid=endDateLayerframeborder=0width=180height=220style="position:absolute;z-index:9998;display:none"></iframe>');

strFrame='<style>';

strFrame+='INPUT.button{BORDER-RIGHT:#63A3E91pxsolid;BORDER-TOP:#63A3E91pxsolid;BORDER-LEFT:#63A3E91pxsolid;';

strFrame+='BORDER-BOTTOM:#63A3E91pxsolid;BACKGROUND-COLOR:#63A3E9;font-family:宋体;}';

strFrame+='TD{FONT-SIZE:9pt;font-family:宋体;}';

strFrame+='</style>';

strFrame+='<scr'+'ipt>';

strFrame+='vardatelayerx,datelayery;';

strFrame+='varbDrag;';

strFrame+='functiondocument.onmousemove()';

strFrame+='{if(bDrag&&window.event.button==1)';

strFrame+='{varDateLayer=parent.document.all.endDateLayer.style;';

strFrame+='DateLayer.posLeft+=window.event.clientX-datelayerx;';

strFrame+='DateLayer.posTop+=window.event.clientY-datelayery;}}';

strFrame+='functionDragStart()';

strFrame+='{varDateLayer=parent.document.all.endDateLayer.style;';

strFrame+='datelayerx=window.event.clientX;';

strFrame+='datelayery=window.event.clientY;';

strFrame+='bDrag=true;}';

strFrame+='functionDragEnd(){';

strFrame+='bDrag=false;}';

strFrame+='</scr'+'ipt>';

strFrame+='<divstyle="z-index:9999;position:absolute;left:0;top:0;"onselectstart="returnfalse">';

strFrame+='<spanid=tmpSelectYearLayerstyle="z-index:9999;position:absolute;top:3;left:19;display:none"></span>';

strFrame+='<spanid=tmpSelectMonthLayerstyle="z-index:9999;position:absolute;top:3;left:78;display:none"></span>';

strFrame+='<spanid=tmpSelectHourLayerstyle="z-index:9999;position:absolute;top:188;left:35px;display:none"></span>';

strFrame+='<spanid=tmpSelectMinuteLayerstyle="z-index:9999;position:absolute;top:188;left:77px;display:none"></span>';

strFrame+='<spanid=tmpSelectSecondLayerstyle="z-index:9999;position:absolute;top:188;left:119px;display:none"></span>';

strFrame+='<tableborder=1cellspacing=0cellpadding=0width=142height=160bordercolor=#63A3E9bgcolor=#63A3E9>';

strFrame+='<tr><tdwidth=142height=23bgcolor=#FFFFFF>';

strFrame+='<tableborder=0cellspacing=1cellpadding=0width=158height=23>';

strFrame+='<tralign=center>';

strFrame+='<tdwidth=16align=centerbgcolor=#63A3E9style="font-size:12px;cursor:hand;color:#ffffff"';

strFrame+='onclick="parent.meizzPrevM()"title="向前翻1月"><b><</b></td>';

strFrame+='<tdwidth=60align="center"bgcolor="#63A3E9"style="font-size:12px;cursor:hand"';

strFrame+='onmouseover="style.backgroundColor='#aaccf3'"';

strFrame+='onmouseout="style.backgroundColor='#63A3E9'"';

strFrame+='onclick="parent.tmpSelectYearInnerHTML(this.innerText.substring(0,4))"';

strFrame+='title="点击这里选择年份"><spanid=meizzYearHead></span></td>';

strFrame+='<tdwidth=48align="center"style="font-size:12px;font-color:#ffffff;cursor:hand"';

strFrame+='bgcolor="#63A3E9"onmouseover="style.backgroundColor='#aaccf3'"';

strFrame+='onmouseout="style.backgroundColor='#63A3E9'"';

strFrame+='onclick="parent.tmpSelectMonthInnerHTML(this.innerText.length==3?this.innerText.substring(0,1):this.innerText.substring(0,2))"';

strFrame+='title="点击这里选择月份"><spanid=meizzMonthHead></span></td>';

strFrame+='<tdwidth=16bgcolor=#63A3E9align=centerstyle="font-size:12px;cursor:hand;color:#ffffff"';

strFrame+='onclick="parent.meizzNextM()"title="向后翻1月"><b>></b></td>';

strFrame+='</tr>';

strFrame+='</table></td></tr>';

strFrame+='<tr><tdwidth=142height=18>';

strFrame+='<tableborder=0cellspacing=0cellpadding=2bgcolor=#63A3E9'+(bMoveable?'onmousedown="DragStart()"onmouseup="DragEnd()"':'');

strFrame+='BORDERCOLORLIGHT=#63A3E9BORDERCOLORDARK=#FFFFFFwidth=140height=20style="cursor:'+(bMoveable?'move':'default')+'">';

strFrame+='<tr><tdstyle="font-size:12px;color:#ffffff"width=20> 日</td>';

strFrame+='<tdstyle="font-size:12px;color:#FFFFFF"> 一</td><tdstyle="font-size:12px;color:#FFFFFF"> 二</td>';

strFrame+='<tdstyle="font-size:12px;color:#FFFFFF"> 三</td><tdstyle="font-size:12px;color:#FFFFFF"> 四</td>';

strFrame+='<tdstyle="font-size:12px;color:#FFFFFF"> 五</td><tdstyle="font-size:12px;color:#FFFFFF"> 六</td></tr>';

strFrame+='</table></td></tr>';

strFrame+='<tr><tdwidth=142height=120>';

strFrame+='<tableborder=1cellspacing=2cellpadding=2BORDERCOLORLIGHT=#63A3E9BORDERCOLORDARK=#FFFFFFbgcolor=#fff8ecwidth=140height=120>';

varn=0;for(j=0;j<5;j++){strFrame+='<tralign=center>';for(i=0;i<7;i++){

strFrame+='<tdwidth=20height=20id=meizzDay'+n+'style="font-size:12px"onclick=parent.meizzDayClick(this.innerText,0)></td>';n++;}

strFrame+='</tr>';}

strFrame+='<tralign=center>';

for(i=35;i<37;i++)strFrame+='<tdwidth=20height=20id=meizzDay'+i+'style="font-size:12px"onclick="parent.meizzDayClick(this.innerText,0)"></td>';

strFrame+='<tdcolspan=5align=rightstyle="color:#1478eb"><spanonclick="parent.setNull()"style="font-size:12px;cursor:hand"';

strFrame+='onmouseover="style.color='#ff0000'"onmouseout="style.color='#1478eb'"title="将日期置空">置空</span>  <spanonclick="parent.meizzToday()"style="font-size:12px;cursor:hand"';

strFrame+='onmouseover="style.color='#ff0000'"onmouseout="style.color='#1478eb'"title="当前日期时间">当前</span>  <spanstyle="cursor:hand"id=evaAllOKonmouseover="style.color='#ff0000'"onmouseout="style.color='#1478eb'"onclick="parent.closeLayer()"title="关闭日历">关闭 </span></td></tr>';

strFrame+='</table></td></tr><tr><td>';

strFrame+='<tableborder=0cellspacing=1cellpadding=0width=100%bgcolor=#FFFFFFheight=22>';

strFrame+='<trbgcolor="#63A3E9"><tdid=bUseTimeLayerwidth=30style="cursor:hand"title="点击这里启用/禁用时间"';

strFrame+='onmouseover="style.backgroundColor='#aaccf3'"align=centeronmouseout="style.backgroundColor='#63A3E9'"';

strFrame+='onclick="parent.UseTime(this)">';

strFrame+='<span></span></td>';

strFrame+='<tdstyle="cursor:hand"onclick="parent.tmpSelectHourInnerHTML(this.innerText.length==3?this.innerText.substring(0,1):this.innerText.substring(0,2))"';

strFrame+='onmouseover="style.backgroundColor='#aaccf3'"onmouseout="style.backgroundColor='#63A3E9'"';

strFrame+='title="点击这里选择时间"align=centerwidth=42>';

strFrame+='<spanid=meizzHourHead></span></td>';

strFrame+='<tdstyle="cursor:hand"onclick="parent.tmpSelectMinuteInnerHTML(this.innerText.length==3?this.innerText.substring(0,1):this.innerText.substring(0,2))"';

strFrame+='onmouseover="style.backgroundColor='#aaccf3'"onmouseout="style.backgroundColor='#63A3E9'"';

strFrame+='title="点击这里选择时间"align=centerwidth=42>';

strFrame+='<spanid=meizzMinuteHead></span></td>';

strFrame+='<tdstyle="cursor:hand"onclick="parent.tmpSelectSecondInnerHTML(this.innerText.length==3?this.innerText.substring(0,1):this.innerText.substring(0,2))"';

strFrame+='onmouseover="style.backgroundColor='#aaccf3'"onmouseout="style.backgroundColor='#63A3E9'"';

strFrame+='title="点击这里选择时间"align=centerwidth=42>';

strFrame+='<spanid=meizzSecondHead></span></td>';

strFrame+='</tr></table></td></tr></table></div>';

window.frames.endDateLayer.document.writeln(strFrame);

window.frames.endDateLayer.document.close();//解决ie进度条不结束的问题

//====================================================WEB页面显示部分======================================================

varoutObject;

varoutButton;//点击的按钮

varoutDate="";//存放对象的日期

varbUseTime=false;//是否使用时间

varodatelayer=window.frames.endDateLayer.document.all;//存放日历对象

varodatelayer=window.endDateLayer.document.all;

//odatelayer.bUseTimeLayer.innerText="NO";

bImgSwitch();

odatelayer.bUseTimeLayer.innerHTML=bImg;

functionsetday(tt,obj)//主调函数

{

if(arguments.length>2){alert("对不起！传入本控件的参数太多！");return;}

if(arguments.length==0){alert("对不起！您没有传回本控件任何参数！");return;}

vardads=document.all.endDateLayer.style;

varth=tt;

varttop=tt.offsetTop;//TT控件的定位点高

varthei=tt.clientHeight;//TT控件本身的高

vartleft=tt.offsetLeft;//TT控件的定位点宽

varttyp=tt.type;//TT控件的类型

while(tt=tt.offsetParent){ttop+=tt.offsetTop;tleft+=tt.offsetLeft;}

dads.top=(ttyp=="image")?ttop+thei:ttop+thei+6;

dads.left=tleft;

outObject=(arguments.length==1)?th:obj;

outButton=(arguments.length==1)?null:th;//设定外部点击的按钮

//根据当前输入框的日期显示日历的年月

varreg=/^(d+)-(d{1,2})-(d{1,2})/;//不含时间

varr=outObject.value.match(reg);

if(r!=null){

r[2]=r[2]-1;

vard=newDate(r[1],r[2],r[3]);

if(d.getFullYear()==r[1]&&d.getMonth()==r[2]&&d.getDate()==r[3])

{

outDate=d;

parent.meizzTheYear=r[1];

parent.meizzTheMonth=r[2];

parent.meizzTheDate=r[3];

}

else

{

outDate="";

}

meizzSetDay(r[1],r[2]+1);

}

else

{

outDate="";

meizzSetDay(newDate().getFullYear(),newDate().getMonth()+1);

}

dads.display='';

//判断初始化时是否使用时间,非严格验证

//if(outObject.value.length>10)

//{

bUseTime=true;

bImgSwitch();

odatelayer.bUseTimeLayer.innerHTML=bImg;

meizzWriteHead(meizzTheYear,meizzTheMonth);

//}

//else

//{

//bUseTime=false;

//color: #0

分享到：

一个比较容易调用功能比较完善的 cookie ... | MySQL 存储过程学习笔记

2007-10-21 17:08
浏览 2080
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论