日期选择器

效果如下图:

实现过程:
date.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/date.js" charset="gbk"></script>
</head>
<body onload="init()">

    <select id="year" ></select>年
    <select id="month" onchange="setDay()"></select>月
    <select id="day"></select>日
</body>
</html>

date.js

function init(){
    var year= document.getElementById("year");
    for(var i=1980;i<=2016;i++){
        year.options.add(new Option(i,i));
    }
    
    var month=document.getElementById("month");
    month.options.add(new Option("-月-",0));
    for(var i=1;i<=12;i++){
        month.options.add(new Option(i,i));
    }
}

function setDay(){
    
    year=document.getElementById("year").value;
    month=document.getElementById("month").value;
    document.getElementById("day").length=0;
    
    var data=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
    var days=data[month-1];
    
    if((year%4==0&&year%100!=0)||(year%400==0)){
        if(month==2){
            days++;
        }
    }
    
    for(var i=1;i<=days;i++){
        day.options.add(new Option(i,i));
    }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容