当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 不错的一个日期输入 动态

不错的一个日期输入 动态

2019年08月02日  | 移动技术网IT编程  | 我要评论

复制代码 代码如下:

<!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>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网