日期联动框

最新推荐文章于 2024-10-30 18:24:25 发布

小事一

最新推荐文章于 2024-10-30 18:24:25 发布

阅读量188

点赞数

文章标签： javascript 日期联动框

本文链接：https://blog.csdn.net/habab234/article/details/51640956

版权

简单实现日期下拉框(1900--2100)

<!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=utf-8" />
<title>无标题文档</title>
</head>
<script type="text/javascript">
	function showYear(){
		var startYear = 1900;
		var endYear = 2100;
		var selectNode = document.getElementsByTagName("select")[0];
		for(var y = startYear; y<=endYear;y++){
			var opNode = document.createElement("option");
			opNode.innerHTML=y;
			selectNode.appendChild(opNode);			
		}
	}
	function showMonth(){
		var selectNode = document.getElementsByTagName("select")[1];
		
		var selectNodes = document.getElementsByTagName("select");
		var yearOptionNodes = selectNodes[0].childNodes;
		var year = yearOptionNodes[selectNodes[0].selectedIndex].innerHTML;
		
		if(parseInt(year)){
			if(selectNode.childNodes.length==13){
				selectNode.selectedIndex =0;
			}else{
				for(var m =1; m<13;m++){
					var opNode = document.createElement("option");
					opNode.innerHTML=m;
					selectNode.appendChild(opNode);	
				}
			}
			
		}else{
			//delete
			var monthOptionNodes = selectNodes[1].childNodes;
			var len =monthOptionNodes.length;
			for(var j = 1; j < len; j++){
				selectNodes[1].removeChild(monthOptionNodes<span style="color:#ff0000;"><strong>[1]</strong></span>);
			}
			showDay();
		}
	}
	
	function showDay(){
		var selectNodes = document.getElementsByTagName("select");
		var yearOptionNodes = selectNodes[0].childNodes;
		var year = yearOptionNodes[selectNodes[0].selectedIndex].innerHTML;
		if(year%4==0&&year%100!=0||year%400==0){
			var feb = 2;
		}else{
			var feb = 1;
		}
		var monthOptionNodes = selectNodes[1].childNodes;
		var month = monthOptionNodes[selectNodes[1].selectedIndex].innerHTML;
		if(month==1||month==3||month==5||month==7||month==8||month==10||month==12){
			var days=31;
		}else if(month==2){
			var days=27+feb;
		}else if(month==4||month==6||month==9||month==11){
			var days=30;
		}else{
			var days=0;
		}
		//delete
		var dayOptionNodes = selectNodes[2].childNodes;
		var len =dayOptionNodes.length;
		for(var j = 1; j < len; j++){
			selectNodes[2].removeChild(dayOptionNodes<strong><span style="color:#ff0000;">[1]</span></strong>);			
		}
		//add
		var selectNode = document.getElementsByTagName("select")[2];
		for(var i = 1; i<=days;i++){
			var opNode = document.createElement("option");
			opNode.innerHTML=i;
			selectNode.appendChild(opNode);			
		}
	}

</script>
<body οnlοad="showYear()">
年<select οnchange="showMonth()"><option>/</option></select>
月<select οnchange="showDay()"><option>/</option></select>
日<select><option>/</option></select>
</body>
</html>

没想到这东西都花了好些时间，delete部分碰到BUG搞了好久才发现原因，红框部分需要固定才可以，如果填 j ，随着node的删除，只能删一半了。

纯粹纪录一下。。。