WEB开发人员网络
→
WEB前台
→
JavaScript
→
日期日历
用户输入框日期(年月日)提醒
提供者: 发布时间:2008-5-28 浏览:[1992]
搜索更多相关信息
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <TITLE> New Document </TITLE> <style> fieldset{ width:300px; padding:20px;} </style> <script type="text/javascript"> /* *** http://www.hansir.cn *** */ var data_help = function(inp, divide){ this.inp = document.getElementById(inp); this.divide = divide; this.format = 'yyyy'+divide+'mm'+divide+'dd'; //显示字符样式 this.styleH='<span style="font-weight:bold; color:green">'; this.styleB='</span>'; this.load(); // 初始化 } data_help.prototype={ load: function(){ // 创建一个用于显示提示的DIV并设置样式 var div = document.createElement('div'); div.setAttribute('style', 'height:21px; line-height:21px; background:#fffff6; color:#f33; border:1px solid #ccc; border-top:0; text-indent:3px; position:absolute; visibility:hidden'); div.style.cssText = 'height:21px; line-height:21px; background:#fffff6; color:#f33; border:1px solid #ccc; border-top:0; text-indent:3px; position:absolute; visibility:hidden'; div.innerHTML = this.format; this.div = div; document.body.appendChild(div); // 设置DIV的位置 var inp = this.inp; var inpW = inp.offsetWidth, inpH = inp.offsetHeight; var left = 0, top = 0; while(inp != null){ // 计算输入框在页面里的坐标给提示框使用 left += inp.offsetLeft; top += inp.offsetTop; inp = inp.offsetParent; } this.div.style.height = '21px'; this.div.style.width = inpW-2 + 'px'; this.div.style.left = left + 'px'; this.div.style.top = inpH+top + 'px'; // 加载输入框事件 var oThis = this; this.inp.onfocus = function(){ oThis.inp_v.call(oThis); } this.inp.onblur = function(){ oThis.inp_h.call(oThis); } this.inp.onkeyup = function(e){ e?intKey=e.which:intKey=event.keyCode; oThis.inp_chk.call(oThis,intKey); } }, inp_v: function(){ // 显示 this.div.style.visibility = 'visible'; }, inp_h: function(){ // 隐藏 this.div.style.visibility = 'hidden'; }, inp_chk: function(intkey){ // 格式化日期及提示信息样式 2008-03-20 if(intKey==37||intKey==39)return; // 左右键不检测 var date = this.parseDate(intKey); // // 用户输入的日期 if(!date)return; var format = this.format; // 提示字符 var divide = this.divide; var uarr = date.split(divide), farr = format.split(divide) // 字符分组 var darr = date.split(/\d/); //分隔符组 var styleH = this.styleH, styleB = this.styleB; var y=farr[0], m=farr[1], d=farr[2]; //年月日 if(uarr[0])y=styleH+y.slice(0,uarr[0].length)+styleB+y.slice(uarr[0].length,y.length); if(uarr[1]){ m=styleH+divide+m.slice(0,uarr[1].length)+styleB+m.slice(uarr[1].length,m.length); }else{ darr.length>0?m=styleH+divide+styleB+m:m=divide+m; } if(uarr[2]){ d=styleH+divide+d.slice(0,uarr[2].length)+styleB+d.slice(uarr[2].length,d.length); }else{ darr.length>1?d=styleH+divide+styleB+d:d=divide+d; } this.div.innerHTML= y+m+d; }, parseDate: function(intKey){ // 格式化日期格式,从别人写的方法里扣来的 /* 日期只接受数字字符,并且符合正常日期,比如4月只到30号,错误的部分比如“200A“里的“A”系统将把错误字符删除,如果朋友有好的建议欢迎分享。 */ var date = this.inp.value.replace(/\s/g,''); if(intKey==8) return date; // 退格键直接返回 var divide=this.divide; var strDateArray = date.split(divide); strDateArray[0]?intYear = strDateArray[0].replace(/^(\d*)/,'$1'):intYear=''; strDateArray[1]?intMonth = strDateArray[1].replace(/^(\d*)/,'$1'):intMonth=''; strDateArray[2]?intDay = strDateArray[2].replace(/^(\d*)/,'$1'):intDay=''; isNaN(intYear)?intYear='':intYear=intYear.slice(0,4); isNaN(intMonth)?intMonth='':intMonth=intMonth.slice(0,2); isNaN(intDay)?intDay='':intDay=intDay.slice(0,2); intMonth>12?intMonth=intMonth.slice(0,1):''; if(intMonth == 1 || intMonth == 3 || intMonth == 5 || intMonth == 7 || intMonth == 8 || intMonth == 10 || intMonth == 12){ intDay>31?intDay=intDay.slice(0,1):''; } if(intMonth == 4 || intMonth == 6 || intMonth == 9 || intMonth == 11){ intDay.slice>30?intDay=intDay.slice(0,1):''; } if(intMonth == 2){ boolLeapYear = false; if ((intYear % 100) === 0) { if ((intYear % 400) === 0) { boolLeapYear = true; } } else { if ((intYear % 4) === 0) { boolLeapYear = true; } } if (boolLeapYear) { intDay.slice(0,1)>2?intDay='':''; } else { if (intDay > 28) { intDay.slice(0,1)>2?intDay='':intDay>28?intDay='2':''; } } } switch(strDateArray.length){ case 1: intYear.length==4?date=date+divide:date=intYear; break; case 2: intMonth.length==2?date=intYear+divide+intMonth+divide:date=intYear+divide+intMonth; break; default: date=intYear+divide+intMonth+divide+intDay; } this.inp.value=date; return date; } } window.onload = function(){ new data_help('birthday', '-'); new data_help('birthday2', '/'); } </script> </HEAD> <body> <div> 日期1:<input type="text" id="birthday" /><br/><br /><br /> 日期2:<input type="text" id="birthday2" /><br/><br /><br /> </div> </body> </html>
提示:您可以先修改部分代码再运行
下一篇:
兼容FF,IE7.0,IE6.0,Safari,Opera的万年历
上一篇:
日历普及