用下拉列表select选择日期操作代码

最新推荐文章于 2023-12-28 16:24:24 发布

最新推荐文章于 2023-12-28 16:24:24 发布 · 883 阅读

文章标签：

#JavaScript #HTML #ViewUI

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种通过使用下拉列表而非手动输入来选择日期的方法，以减少用户输入错误并简化日期验证过程。该方法利用JavaScript动态生成年、月、日的下拉列表，并根据所选月份自动调整日期范围。

避免用户输入日期时出错，用下拉列表选择日期，尽量减少用户手工输入。这样可以减少对日期的判断.

下面的代码输入的效果就是有三个下拉列表，分别是'year','month'和'day'，单击下拉列表可以对日期进行选择：（自己写的，如果有更简单的，请同志们留言分享一下）

<html><head>
<script language="javascript">
	function getobj(id){
		return document.getElementById(id);
	}
	function list(){
		var date=new Date();
		var le1=date.getFullYear()-1970;
		addlist('year',1970,le1);
		addlist('month',1,12);
		addlist('day',1,31);
	}
	function febday(){//判断不同的情况下二月的天数，并更改日的列表项中的内容
		var year=getobj('year').value;
		var month=getobj('month').value;
		var bigm=new Array('1','3','5','7','8','10','12');
		var bigstr=bigm.join('-');
		var smallm=new Array('4','6','9','10');
		var smallstr=smallm.join('-');
		if(bigstr.indexOf(month)>-1)
			addlist('day',1,31);
		if(smallstr.indexOf(month)>-1)
			day(30);
		if(month=='2'){
			if(isRui(year)){
				day(29);
			}else{
				day(28);
			}
		}
	}
	function day(num){//改变二月的天数
		var list=getobj('day');
		var listlen=list.options.length;
		for(var i=listlen-1;i>=num;i--){
			list.options[i]=null;
		}
	}
	function isRui(year){//是否是闰年
		if((year%400==0)||(year%4==0 && year/100!=0))
			return true;
		return false;
	}
	function addlist(obj,begin,length){//为列表项中批量添加项目
		var list=getobj(obj);
		for(var i=0;i<length;i++){
			var num=i+begin;
			list.options[i]=new Option(num,num);
		}
	}
</script>
</head>
<body onload="list();">
	<form name="form" id="form">
        <select id="year" name="year" onchange="febday();">
        </select>年
        <select name="month" id="month" onchange="febday();">
        </select>月
        <select name="day" id="day">
        </select>日
	</form>
</body>
</html>