不错的一个日期输入 动态


Posted in Javascript onNovember 06, 2006
<!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 相关文章推荐
js arguments.callee的应用代码
May 07 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
Mar 19 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
Sep 10 Javascript
通过js获取div的background-image属性
Oct 15 Javascript
JavaScript运动减速效果实例分析
Aug 04 Javascript
javascript记住用户名和登录密码(两种方式)
Aug 04 Javascript
Jquery实现顶部弹出框特效
Aug 08 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
Nov 30 Javascript
angular双向绑定模拟探索
Dec 26 Javascript
js实现动态增加文件域表单功能
Oct 22 Javascript
vue.js实现h5机器人聊天(测试版)
Jul 16 Javascript
Vue-cli 移动端布局和动画使用详解
Aug 10 Javascript
由prototype_1.3.1进入javascript殿堂-类的初探
Nov 06 #Javascript
javascript读取xml
Nov 04 #Javascript
用javascript操作xml
Nov 04 #Javascript
一个加密JavaScript的开源工具PACKER2.0.2
Nov 04 #Javascript
破除一些网站复制、右键限制
Nov 04 #Javascript
js计数器代码
Nov 04 #Javascript
Js中sort()方法的用法
Nov 04 #Javascript
You might like
探讨:php中在foreach中使用foreach ($arr as &amp;$value) 这种类型的解释
2013/06/24 PHP
php通过字符串调用函数示例
2014/03/02 PHP
PHP中使用curl伪造IP的简单方法
2015/08/07 PHP
PHP实现QQ登录的开原理和实现过程
2018/02/04 PHP
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
javascript读取xml实现javascript分页
2013/12/13 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
2013/12/29 Javascript
跟我学习javascript的作用域与作用域链
2015/11/19 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
2016/04/03 Javascript
支持移动端原生js轮播图
2017/02/16 Javascript
原生node.js案例--前后台交互
2017/02/20 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
2017/09/15 Javascript
jquery根据name取得select选中的值实例(超简单)
2018/01/25 jQuery
js中的 || 与 &amp;&amp; 运算符详解
2018/05/24 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
2019/03/01 Javascript
JavaScript数组排序功能简单实现
2020/05/14 Javascript
[02:02]特效爆炸!DOTA2珍宝之瓶待你开启
2018/08/21 DOTA
python基于queue和threading实现多线程下载实例
2014/10/08 Python
python实现的正则表达式功能入门教程【经典】
2017/06/05 Python
Python聊天室程序(基础版)
2018/04/01 Python
Python不使用int()函数把字符串转换为数字的方法
2018/07/09 Python
django框架事务处理小结【ORM 事务及raw sql,customize sql 事务处理】
2019/06/27 Python
将python运行结果保存至本地文件中的示例讲解
2019/07/11 Python
python生成特定分布数的实例
2019/12/05 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
基于Python3.6中的OpenCV实现图片色彩空间的转换
2020/02/03 Python
使用keras2.0 将Merge层改为函数式
2020/05/23 Python
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
先进事迹报告会感言
2014/01/24 职场文书
遗嘱继承公证书
2014/04/09 职场文书
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
作风建设整改方案
2014/10/27 职场文书
2014年物资管理工作总结
2014/12/02 职场文书
招标保密承诺书
2015/01/20 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书
vue项目中的支付功能实现(微信支付和支付宝支付)
2022/02/18 Vue.js