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

最新推荐文章于 2022-03-14 21:11:35 发布

azheng270

最新推荐文章于 2022-03-14 21:11:35 发布

阅读量4.7k

点赞数

文章标签：日历 function date null object string

本文链接：https://blog.csdn.net/azheng270/article/details/1835808

版权

该博客介绍了如何使用JavaScript创建一个日历时间输入控件，允许用户选择特定时间。主要通过setday函数来实现，可以接收当前元素和控件名称作为参数。文中给出了两个示例，分别是通过按钮点击触发和输入框获取焦点触发。控件还特别设置了分钟和秒的默认值为0，并支持用户进行修改。

摘要由CSDN通过智能技术生成

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

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

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

// 一、<input name=txt><input type=button value=setday οnclick="setday(this,document.all.txt)">

// 二、<input οnfοcus="setday(this)">

var bMoveable = true ;

var strFrame;

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

strFrame = ' <style> ' ;

strFrame += ' INPUT.button{BORDER-RIGHT: #63A3E9 1px solid;BORDER-TOP: #63A3E9 1px solid;BORDER-LEFT: #63A3E9 1px solid; ' ;

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

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

strFrame += ' </style> ' ;

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

strFrame += ' var datelayerx,datelayery; ' ;

strFrame += ' var bDrag; ' ;

strFrame += ' function document.onmousemove() ' ;

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

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

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

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

strFrame += ' function DragStart() ' ;

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

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

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

strFrame += ' bDrag=true;} ' ;

strFrame += ' function DragEnd(){ ' ;

strFrame += ' bDrag=false;} ' ;

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

strFrame += ' <div style="z-index:9999;position: absolute; left:0; top:0;" onselectstart="return false"> ' ;

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

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

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

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

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

strFrame += ' <table border=1 cellspacing=0 cellpadding=0 width=142 height=160 bordercolor=#63A3E9 bgcolor=#63A3E9 > ' ;

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

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

strFrame += ' <tr align=center > ' ;

strFrame += ' <td width=16 align=center bgcolor=#63A3E9 style="font-size:12px;cursor: hand;color: #ffffff" ' ;

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

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

strFrame += ' οnmοuseοver="style.backgroundColor='#aaccf3'" ' ;

strFrame += ' οnmοuseοut="style.backgroundColor='#63A3E9'" ' ;

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

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

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

strFrame += ' bgcolor="#63A3E9" οnmοuseοver="style.backgroundColor='#aaccf3'" ' ;

strFrame += ' οnmοuseοut="style.backgroundColor='#63A3E9'" ' ;

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

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

strFrame += ' <td width=16 bgcolor=#63A3E9 align=center style="font-size:12px;cursor: hand;color: #ffffff" ' ;

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

strFrame += ' </tr> ' ;

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

strFrame += ' <tr><td width=142 height=18 > ' ;

strFrame += ' <table border=0 cellspacing=0 cellpadding=2 bgcolor=#63A3E9 ' + (bMoveable ? ' οnmοusedοwn="DragStart()" οnmοuseup="DragEnd()" ' : '' );

strFrame += ' BORDERCOLORLIGHT=#63A3E9 BORDERCOLORDARK=#FFFFFF width=140 height=20 style="cursor: ' + (bMoveable ? ' move ' : ' default ' ) + ' "> ' ;

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

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

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

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

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

strFrame += ' <tr ><td width=142 height=120 > ' ;

strFrame += ' <table border=1 cellspacing=2 cellpadding=2 BORDERCOLORLIGHT=#63A3E9 BORDERCOLORDARK=#FFFFFF bgcolor=#fff8ec width=140 height=120 > ' ;

var n = 0 ; for (j = 0 ;j < 5 ;j ++ ) { strFrame+= ' <tr align=center >'; for (i=0;i<7;i++){

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

strFrame+='</tr>';}

strFrame += ' <tr align=center > ' ;

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

strFrame += ' <td colspan=5 align=right style="color:#1478eb"><span οnclick="parent.setNull()" style="font-size:12px;cursor: hand" ' ;

strFrame += ' οnmοuseοver="style.color='#ff0000'" οnmοuseοut="style.color='#1478eb'" title="将日期置空">置空</span>  <span οnclick="parent.meizzToday()" style="font-size:12px;cursor: hand" ' ;

strFrame += ' οnmοuseοver="style.color='#ff0000'" οnmοuseοut="style.color='#1478eb'" title="当前日期时间">当前</span>  <span style="cursor:hand" id=evaAllOK οnmοuseοver="style.color='#ff0000'" οnmοuseοut="style.color='#1478eb'" οnclick="parent.closeLayer()" title="关闭日历">关闭 </span></td></tr> ' ;

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

strFrame += ' <table border=0 cellspacing=1 cellpadding=0 width=100% bgcolor=#FFFFFF height=22 > ' ;

strFrame += ' <tr bgcolor="#63A3E9"><td id=bUseTimeLayer width=30 style="cursor:hand" title="点击这里启用/禁用时间" ' ;

strFrame += ' οnmοuseοver="style.backgroundColor='#aaccf3'" align=center οnmοuseοut="style.backgroundColor='#63A3E9'" ' ;

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

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

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

strFrame += ' οnmοuseοver="style.backgroundColor='#aaccf3'" οnmοuseοut="style.backgroundColor='#63A3E9'" ' ;

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

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

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

strFrame += ' οnmοuseοver="style.backgroundColor='#aaccf3'" οnmοuseοut="style.backgroundColor='#63A3E9'" ' ;

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

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

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

strFrame += ' οnmοuseοver="style.backgroundColor='#aaccf3'" οnmοuseοut="style.backgroundColor='#63A3E9'" ' ;

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

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

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

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

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

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

var outObject;

var outButton; // 点击的按钮

var outDate = "" ; // 存放对象的日期

var bUseTime = false ; // 是否使用时间

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

var odatelayer = window.endDateLayer.document.all;

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

bImgSwitch();

odatelayer.bUseTimeLayer.innerHTML = bImg;

function setday(tt,obj) // 主调函数

{

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

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

var dads = document.all.endDateLayer.style;

var th = tt;

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

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

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

var ttyp = 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; //设定外部点击的按钮

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

var reg = /^(d+)-(d{ 1,2})-(d{ 1,2}

最低0.47元/天解锁文章

azheng270

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
能够选择时间的 JS 日历时间输入控件

主调用函数是 setday(this,[object])和setday(this)，[object]是控件输出的控件名，举两个例子：一、二、手动调整了分和秒的初始值为0,也可手动调整回取现在时间得分和秒 // 主调用函数是 setday(this,[object])和setday(this)，[object]是控件输出的控件名，举两个例子：// 一、// 二、v
复制链接

扫一扫