不错的一个日期输入 动态


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 相关文章推荐
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
Mar 31 Javascript
理解Javascript_07_理解instanceof实现原理
Oct 15 Javascript
使用Jquery实现点击文字后变成文本框且可修改
Sep 21 Javascript
jquery.cookie用法详细解析
Dec 18 Javascript
jquery实现非叠加式的搜索框提示效果
Jan 07 Javascript
javascript使用正则获取url上的某个参数
Sep 04 Javascript
javascript记住用户名和登录密码(两种方式)
Aug 04 Javascript
全新打包工具parcel零配置vue开发脚手架
Jan 11 Javascript
详解js类型判断
May 22 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 Javascript
es6数值的扩展方法
Mar 11 Javascript
javascript中的相等操作符(==与===区别)
Dec 21 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 Mssql操作简单封装支持存储过程
2009/12/11 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
JavaScript游戏之优化篇
2010/11/08 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
2016/11/25 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
不得不知的ES6小技巧
2018/07/28 Javascript
angular2 NgModel模块的具体使用方法
2019/04/10 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
2019/04/26 Javascript
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
vue实现简易计算器功能
2021/01/20 Vue.js
[01:10]DOTA2次级职业联赛 - U5战队宣传片
2014/12/01 DOTA
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
Python正则表达式介绍
2012/08/06 Python
Python中矩阵库Numpy基本操作详解
2017/11/21 Python
Python简单生成随机姓名的方法示例
2017/12/27 Python
Python跳出多重循环的方法示例
2019/07/03 Python
python GUI库图形界面开发之PyQt5窗口类QMainWindow详细使用方法
2020/02/26 Python
python实现简单坦克大战
2020/03/27 Python
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
法国体育用品商店:GO Sport
2019/10/23 全球购物
大一学生的职业生涯规划书范文
2014/01/19 职场文书
高三自我评价
2014/02/01 职场文书
初三毕业评语
2014/12/26 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
2015大学党建带团建工作总结
2015/07/23 职场文书
小学生红领巾广播稿
2015/08/19 职场文书
PyTorch的Debug指南
2021/05/07 Python
浅析MySQL如何实现事务隔离
2021/06/26 MySQL
python模块与C和C++动态库相互调用实现过程示例
2021/11/02 Python
WINDOWS下安装mysql 8.x 的方法图文教程
2022/04/19 MySQL