欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

不错的一个日期输入 动态

程序员文章站 2022-06-29 09:20:03
复制代码 代码如下:

复制代码 代码如下:

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