文本框js日历弹出

现在很多应用软件,不管是 c / s 的还是 b / s 的软件,输入日期文本框都是做了安全处理的,好的做法也是用得最多的一种做法是当用户要编辑日期输入框时,  弹出一个精美的小万年历给用户选择, 这种做法既友好,又美观 ,这样用户录入的日期只能选,不能输,出错录几乎为0 。 c / s 的软件我就不讲了; 这里主要讲讲web的日期输入框,  web输入框获得焦点是弹出小日历,供用户选择  。 用法是先引用3个做好的 js 文件, 和一个 css样式文件,只需在日期文本框中写   :

  <input type="text" id = "calendar" readonly="readonly"  οnfοcus="calShow('calendar')">  

    这样运行时, 当日期文本框获得焦点时就可以弹出小日历供用户选择。

  这样写虽然可以,但是也有一个小瑕疵 ,就是 : 日期文本框第一次获得焦点时可以马上弹出小日历,   但是第二次开始弹出就有点迟疑,甚至不弹出  。 

 

  在此本人提出一个小建议  ,把上面的代码改成:

 <input type="text" id = "calendar" readonly="readonly"  onClick="calShow('calendar')">  

    我们不是用它的获得焦点事件,而使用日期文本框的单击事件  ,这样小日历的弹出效果就很好了,各位不信可以试试,  这是本人的实践经验。 

 

    至于弹出日历的几个组件: 3个js文件和一个cs文件大家需要的话可以找我要, 我的QQ号码 : 619899271      发邮件也行。   kangjie619899271@sohu.com

点击文本框按钮弹出日期 <div style="width:110px; float:left;"><input name="text" type="text" class="Input" id=showdate /></div><div style="margin-left:-20px; margin-top:4px; width:20px; float:left; z-index:1000;"> <input name="image" type="image" id=controlcalendar onclick="javascript:document.getElementById('caltable').style.display='';" value="日历" src="images/rq.gif" /></div> <table border="0" cellpadding="0" cellspacing="1" class="Calendar" id="caltable" style="display:none"> <thead> <tr align="center" valign="middle"> <td colspan="7" class="Title"> <a href="javaScript:subMonth();" title="上一月" Class="DayButton">3</a> <input name="year" id="year" type="text" size="4" maxlength="4" onKeyDown="if (event.keyCode==13){setDate()}" onKeyUp="this.value=this.value.replace(/[^0-9]/g,'')" onpaste="this.value=this.value.replace(/[^0-9]/g,'')"> 年 <input name="month" id="month" type="text" size="1" maxlength="2" onKeyDown="if (event.keyCode==13){setDate()}" onKeyUp="this.value=this.value.replace(/[^0-9]/g,'')" onpaste="this.value=this.value.replace(/[^0-9]/g,'')"> 月 <a href="JavaScript:addMonth();" title="下一月" Class="DayButton">4</a> </td> </tr> <tr align="center" valign="middle"> <Script LANGUAGE="JavaScript"> document.write("<TD class=DaySunTitle id=diary >" + days[0] + "</TD>"); for (var intLoop = 1; intLoop < days.length-1;intLoop++) document.write("<TD class=DayTitle id=diary>" + days[intLoop] + "</TD>"); document.write("<TD class=DaySatTitle id=diary>" + days[intLoop] + "</TD>"); </Script> </TR> </thead> <TBODY border=1 cellspacing="0" cellpadding="0" ID="calendar" ALIGN=CENTER ONCLICK="getDiary()"> <Script LANGUAGE="JavaScript"> for (var intWeeks = 0; intWeeks < 6; intWeeks++) { document.write("<TR style='cursor:hand'>"); for (var intDays = 0; intDays < days.length;intDays++) document.write("<TD class=CalendarTD onMouseover='buttonOver();' onMouseOut='buttonOut();'></TD>"); document.write("</TR>"); } </Script> </TBODY> </TABLE>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值