一个日期下拉菜单的实现

最新推荐文章于 2024-09-05 09:13:06 发布

weixin_30788239

最新推荐文章于 2024-09-05 09:13:06 发布

阅读量312

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xue-xu-hao/p/5978841.html

版权

<html>
<head>
<script type="text/javascript">
   function showYear(){
       //获取年份对应的节点
       var yearNode = document.getElementById("year");
       //获取该年份对应的第一个子节点
       var childYear = yearNode.childNodes[0];
       //创建最早日期的对象
       var dateBegin = new Date(1900,0,1);
       //创建当前日期的对象
       var dateNow = new Date();
       //获取最早日期的年份
       var yearBegin = dateBegin.getFullYear();
       //获取当前日期的年份
       var yearNow = dateNow.getFullYear();
       //创建一个储存年份的数组并将从最早日期的年份到当前日期的年份存进去
       var years = new Array();
       for(;yearBegin<=yearNow;yearBegin++){
           years.push(yearBegin);
       }
       //遍历对应的所有年份然后创建对应的option添加到year上
       for(var index = 0;index<years.length;index++){
           var option = document.createElement("option");
           option.innerHTML = years[index];
           yearNode.appendChild(option);
       }
   }
   function showMonth(){
       //获取月份对应的节点
       var monthNode = document.getElementById("month");
       //获取该月份对应的第一个子节点
       var childMonth = monthNode.childNodes[0];
       //创建一个储存月份数的数组，并将月份数存进去
       var months = new Array();
       for(var i = 1;i<=12;i++){
           months.push(i);
       }
       //清除month框里的月份数据
       monthNode.options.length = 1;
       //遍历对应的所有月份然后创建对应的option添加到month上
       for(var index = 0;index<months.length;index++){
           var option = document.createElement("option");
           option.innerHTML = months[index];
           monthNode.appendChild(option);
       }
   }
   function showDate(){
       //获取日期对应的节点
       var dateNode = document.getElementById("date");
       //获取该日期对应的第一个子节点
       var childDate = dateNode.childNodes[0];
       //创建一个储存所选年份月份天数的数组，并将天数存进去
       var days = new Array();
       // 获取下拉框所选年份的数值并转为Nunber类型
       var yearSelect = parseInt(document.getElementById("year").value);
       // 获取下拉框所选月份的数值并转为Nunber类型
       var monthSelect = parseInt(document.getElementById("month").value);
       var date = new Date(yearSelect,monthSelect,0);
       //获取该月的天数
       var dayNumber = date.getDate();
       for(var i = 1; i <= dayNumber;i++){
               days.push(i);
           }
       //清除 date框里的日期数据
       dateNode.options.length = 1;
       //遍历对应的所有日期然后创建对应的option添加到date上
       for(var index = 0;index<days.length;index++){
           var option = document.createElement("option");
           option.innerHTML = days[index];
           dateNode.appendChild(option);
       }
   }
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
年<select id="year" οnchange="showMonth()" οnclick="showYear()">
       <option>年份</option>
    </select>
    月<select id="month" οnchange="showDate()">
       <option>月份</option>
    </select>
    日<select id="date">
       <option>日期</option>
    </select>
</body>
</html>