日期选择 

body部分
<body>
<select id="nian" onclick="bian()"></select>年
<select id="yue"  onclick="bian()"></select>月
<select id="ri"></select>日
</body>
</html>
js部分
<script type="text/javascript">
	nian();
	yue();
	ri();
	function nian()
	{
		//获取日期  年
		var a = new Date()  
		var n = parseInt(a.getFullYear());
		var year;
		//div   nian 的内容循环加上项  <option>年份</option>
		for(i=n-5; i<n+6; i++)
		{
			//当获取的日期跟i值相等时  默认选中实时日期  其余不变  
			if(i==n)
			{
				year += "<option selected='selected'>"+i+"</option>";
			}
			else
			{
				year += "<option>"+i+"</option>";
			}
		}		
		document.getElementById("nian").innerHTML = year;
	}
	//月份跟年份一样
	function yue()
	{
		var a = new Date();
		var n = parseInt(a.getMonth()+1);
		var mo;
		for(i=1; i<13; i++)
		{
			if(i==n)
			{
				mo += "<option selected='selected'>"+i+"</option>";
			}
			else
			{
				mo += "<option>"+i+"</option>";
			}
		}		
		document.getElementById("yue").innerHTML = mo;
	}
	//日期先要分支闰年  和大小月份
	function ri()
	{
		var nian = document.getElementById("nian").value;//获取年份的value值
		var yue = document.getElementById("yue").value;
		//默认31天
		var tian = 31;
		//小月30天
		if(yue==4 || yue==6 || yue==9 || yue==11)
		{
			tian = 30;
		}
		//2月份  29   28天
		if(yue == 2)
		{
			if((nian%4==0 && nian%100!=0) || nian%400==0)
			{
				tian = 29;
			}
			else
			{
				tian = 28;
			}
		}
		var day;
		var a = new Date();
		var n = parseInt(a.getDate());
		for (i=1; i<tian+1; i++)
		{
			if(i==n)
			{
				day += "<option selected='selected'>"+i+"</option>";
			}
			else
			{
				day += "<option>"+i+"</option>";
			}
		}
		document.getElementById("ri").innerHTML = day;
	}
	//要给年月点击事件才能获取年月的信息
	function bian()
	{
		ri();
	}
</script>

 

posted @ 2018-04-09 17:54  weizihao  阅读(113)  评论(0)    收藏  举报