不错的一个日期输入动态

复制代码代码如下:<!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>日期控件</title> <script> var agt = navigator.userAgent.toLowerCase(); var OldTextBox; function DateSeter(obj){ var parent=obj.parentNode; var selYear=document.createElement('SELECT'); selYear.id='LoftyYear'; parent.insertBefore(selYear,obj); var selMonth=document.createElement('SELECT'); selMonth.id='LoftyMonth'; parent.insertBefore(selMonth,obj); var selDay=document.createElement('SELECT'); selDay.id='LoftyDay'; parent.insertBefore(selDay,obj); var btnSubmit=document.createElement('BUTTON'); btnSubmit.style.width='22px'; parent.insertBefore(btnSubmit,obj); btnSubmit.id='LoftyBtn'; for(s in btnSubmit) { //document.write(s+'<br />'); } btnSubmit.textContent='OK'; btnSubmit.value='OK'; al(btnSubmit,'click','Restore()'); OldTextBox=obj; parent.removeChild(obj); var now=new Date(); var cYear=now.getFullYear(); SetCurrentYear(selYear,cYear); al(selYear,'change','SetCurrentYear(document.getElementById('LoftyYear'))'); al(selMonth,'change','SetDay(null,null)'); for(i=1;i<=12;i++) { var op=new Option(i,i); selMonth.options.add(op); } var cMonth=now.getMonth()+1; SetDay(cYear,cMonth); selDay.selectedIndex=now.getDate()-1; } function Restore() { var yy=document.getElementById('LoftyYear'); var mm=document.getElementById('LoftyMonth'); var d=document.getElementById('LoftyDay'); var btn=document.getElementById('LoftyBtn'); var time=yy.options[yy.selectedIndex].value+'-'+mm.options[mm.selectedIndex].value+'-'+d.options[d.selectedIndex].value; OldTextBox.value=time; var parent=yy.parentNode; parent.insertBefore(OldTextBox,yy); parent.removeChild(yy); parent.removeChild(mm); parent.removeChild(d); parent.removeChild(btn); } function SetDay(year,month) { if(year==null){ var yy=document.getElementById('LoftyYear'); var mm=document.getElementById('LoftyMonth'); year=Math.round(yy.options[yy.selectedIndex].value); month=Math.round(mm.options[mm.selectedIndex].value); } var date=new Date(year,month,1); date.setDate(0); var maxdate=date.getDate(); var obj=document.getElementById('LoftyDay'); var seldate=obj.selectedIndex; if(obj.options.length>0){ if(Math.round(obj.options[obj.selectedIndex].value)>maxdate) { seldate=maxdate-1; } } reAppendSelect(obj,1,maxdate,seldate+1); } function SetCurrentYear(selecter,currYear) { if(currYear==null){ currYear=Math.round(selecter.options[selecter.selectedIndex].value); } reAppendSelect(selecter,currYear-10,currYear+10,currYear); } function reAppendSelect(selecter,startIndex,endIndex,selIndex) { while(selecter.options.length>0) { selecter.removeChild(selecter.options[selecter.options.length-1]); } for(i=startIndex;i<=endIndex;i++) { var op=new Option(i,i); selecter.options.add(op); op.selected=(selIndex==i); } } function al(obj,lissener,func){ if(agt.indexOf('firefox')!=-1){ obj.addEventListener(lissener,function(){eval(func);},false); }else{ obj.attachEvent('on'+lissener,function(){eval(func);}); } } </script> </head> <body> <input onclick="DateSeter(this);" /> </body> </html>精简只有年:复制代码代码如下:<!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>日期控件</title> <script> var agt = navigator.userAgent.toLowerCase(); var OldTextBox; function DateSeter(obj){ var parent=obj.parentNode; var selYear=document.createElement('SELECT'); selYear.id='LoftyYear'; parent.insertBefore(selYear,obj); /* var btnSubmit=document.createElement('BUTTON'); btnSubmit.style.width='32px'; parent.insertBefore(btnSubmit,obj); btnSubmit.id='LoftyBtn'; btnSubmit.textContent='OK'; btnSubmit.value='OK'; al(btnSubmit,'click','Restore()'); */ OldTextBox=obj; parent.removeChild(obj); var defaultValue = obj.value; var now=new Date(); var cYear=now.getFullYear(); SetCurrentYear(selYear,cYear,defaultValue); al(selYear,'change','Restore(obj)'); } function Restore() { OldTextBox.value = arguments[0].value; var yy=document.getElementById('LoftyYear'); var parent=yy.parentNode; parent.insertBefore(OldTextBox,yy); parent.removeChild(yy); /* var yy=document.getElementById('LoftyYear'); var btn=document.getElementById('LoftyBtn'); var time=yy.options[yy.selectedIndex].value; OldTextBox.value=time; var parent=yy.parentNode; parent.insertBefore(OldTextBox,yy); parent.removeChild(yy); parent.removeChild(btn); */ } function SetCurrentYear(selecter,currYear) { if(currYear==null){ currYear=Math.round(selecter.options[selecter.selectedIndex].value); } var dv = arguments[2]; reAppendSelect(selecter,1901,2001,currYear,dv); } function reAppendSelect(selecter,startIndex,endIndex,selIndex) { while(selecter.options.length>0) { selecter.removeChild(selecter.options[selecter.options.length-1]); } for(i=startIndex;i<=endIndex;i++) { var op=new Option(i,i); selecter.options.add(op); if(arguments[4]!=""){ if(i==arguments[4]) op.selected=true; }else{ if (i==endIndex) op.selected=true; } } } function al(obj,lissener,func){ if(agt.indexOf('firefox')!=-1){ obj.addEventListener(lissener,function(){eval(func);},false); }else{ obj.attachEvent('on'+lissener,function(){eval(func);}); } } </script> </head> <body> <input onclick="DateSeter(this);" /> </body> </html>

　　推荐阅读

　　JavaScript的面向对象(一)

一。传统的基于原型(Prototype)的做法确切地说Javascrīpt的“类”在严格意义上来讲并不能算真正的类，从其声明的对象到类(估切这么说)有这样一个关系： Instance.__proto__=InstanceClass.prototype(ie不支持) 以>>>详细阅读

本文标题：不错的一个日期输入动态

地址：http://www.17bianji.com/kaifa2/JS/31381.html

1/2 1

不错的一个日期输入 动态

不错的一个日期输入动态