主调用函数是 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
分享到:
相关推荐
JavaScript编写的选择性输入日历控件。首先引入该JS文件,某个文本框需要输入日期时,为该文本框添加onfocus事件,事件处理函数为new Calendar(0).show(this)。即添加“onfocus='new Calendar(0).show(this)”。
非常好用的js日历控件,可换肤,带时间输入,可以鼠标拖动
通常我们从网上找到的,都是通过鼠标选择的...本例是一个可以动态配置日期/时间输入项的键盘时间输入控件。支持:1、输入值校验2、只允许输入数字3、屏蔽输入法4、不允许拖拽文字到输入框中5、不允许拷贝文字到输入框中
js文件.在ASP.NET页中,单击可打开日历进行选择输入到textBox控件中,减少手动输入错误.
有一天,一位大虾为了让大家偷懒于是乎他写了一个梅花雪日历控件…… 有一天,有一只菜鸟为寻找asp.net下的JS英文版日历控件而几次拜访蜘蛛……几经溜达终于搞定,于是乎他发布了自己在CSDN上的第一个资源……
在进行开发的过程中,经常需要输入时间,特别是在进行查询、...所以,大部分人还是选择了JS日历控件,也有很多人从事这方面的研究。在这里将我收藏的几种JS日历控件推荐给大家,附有JS源代码,希望给你带来一丝帮助。
三款漂亮的js日历控件 表单输入日期.zip
很好很实用很美观的javascript编写的日历控件, 包括3款input栏的日期小控件 以及2款js日历,精确到秒,非常实用!速速下载吧!!
js日历控件大全,包含测试例子test.html,可设置"年月日"、"年月"、"年月日时",输入格式可自定义
js日历控件,可以通过表单输入日期,进行相关日期的查询和设置
ASP.NET 日期选择 控件 js ASP.NET 日期选择 控件 js
免费的Javascript日期输入及选择控件大杂烩!
一个封装的JavaScript日历控件,可用于文本框输入选择日期使用,该控件的主要好处是:js代码全部封装到一个js文件中,不会同页面中的其他脚本或者css样式定义冲突。
Ext2作出来的东西就是很漂亮,这个实例展示的是使用EXT2.2打造的时间日历控件和IP地址输入控件。
用javascript些的一款用于文本框输入时间的控件
功能强大的JavaScript日历控件 最关键的,无偿的永久的提供给大家免费使用,含全部源代码。 功能简介: 一、更人性化,更全面的功能 大部分日期控件都具备这些功能,但是本日历控件做的更全面,更人性化,并且速度...
javascript Calendar控件
JS日历控件,JS城市标签控件,可用户各种网站建设项目。只要滑动鼠标就能选择对应的城市,避免传统方式用户键盘输入的麻烦。次效果主要用户飞机票订购系统专门制作的。 经本人测试:IE6/IE7/IE8/FF火狐都予兼容。
应该说是现在最全,最方便的日历,支持UTF-8及世界上所有的语言,很好用,就是文件大了一些。 博文链接:https://fangfeixue.iteye.com/blog/128156