日期js简单上拉列表
日期：2014-05-16 浏览次数：20533 次
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>日期动态联动演示</title>
<script type="text/javascript">
??? var oYears,oMonths,oDays,isLeapYear;
??? var iy,im,id;
???
??? window.onload=function () {
??????? initDate();
??? }
???
??? function initDate() {
??????? isLeapYear=false;
??????? oYears=document.getElementById('years');? //获得year的select
??????? oMonths=document.getElementById('months'); //获得month的select
??????? oDays=document.getElementById('days');??????? //获得day的select
??????? initYears();??????????????????????????????? //初始化年份
??????? //设定三个select的onChange事件
??????? oYears.onchange=chgYear;???????????????????
??????? oMonths.onchange=chgMonth;
??????? oDays.onchange=chgDay;
??? }
??? function initYears() {
??????? oYears.length=1;
??????? var cYear=new Date().getYear();
??????? for (var i=cYear-20;i<=cYear;i++)??????????????? //从当前年份前20年开始循环，可以自己更改循环区间
??????? {
??????????? var o=new Option(i.toString(),i.toString());
??????????? oYears.add(o);
??????? }
??? }
??? function chgYear() {
??????? try
??????? {
??????????? isLeapYear=false;
??????????? var year=parseInt(this.options[this.selectedIndex].value);??? //获得选择的年份
??????????? //判断是否是闰年，不懂公式的自己百度
??????????? if (year%4==0) isLeapYear=true;
??????????? if (year%100==0 && year%400!=0) isLeapYear=false;
??????????? if (year%100==0 && year%400==0) isLeapYear=true;
??????????? initMonths();??????????????????????? //为了体现联动的效果，这里没选择一次年份都初始化一次月份
??????? }
??????? catch(e){;}
??? }
???
??? function initMonths() {
??????? oMonths.length=1;
??????? for (var i=1;i<13;i++)??????????????? //月份是1～12月
??????? {
??????????? var o=new Option(i.toString(),i.toString());
??????????? oMonths.add(o);
??????? }
??? }
???
??? function chgMonth() {
??????? try
??????? {
??????????? var month=this.options[this.selectedIndex].value;
??????????? if (month!='')????????????
??????????? {
??????????????? var days;
??????????????? if (month.replace(/(1|3|5|7|8|10|12)/ig,'')=='')???? //判断是否为大月
??????????????????? days=31;
??????????????? else if (month.replace(/(4|6|9|11)/ig,'')=='')??????? //判断是否为小月
??????????????????? days=30;
??????????????? else if (month=='2' && isLeapYear)???????????????? //判断当是2月时，是否为闰月
??????????????????? days=29;
??????????????? else
??????????????????? days=28;
??????????????? initDays(days);
??????????? }
??????? }
??????? catch(e) {;}
??? }
???
??? function initDays(days) {
??????? oDays.length=1;
??????? for (var i=1;i<=parseInt(days);i++)??????????????????? //循环显示天数
??????? {
??????????? var o=new Option(i.toString(),i.toString());
??????????? oDays.add(o);
??????? }
??? }
???
??? function chgDay() {
??????? //改变日期时，调用该函数
??????? try
??????? {
??????????? var year=oYears.options[oYears.selectedIndex].value;
??????????? var month=oMonths.options[oMonths.selectedIndex].value;
??????????? var day=this.options[this.selectedIndex].value;
??????????? alert('您选择了'+year+'年'+month+'月'+day+'日');
??????? }
??????? catch(e) {;}
??? }
</script>
</head>
<body>
<div>
<select id="years">
??? <option value="">选择年份</option>
</select>
<select id="months">
??? <option value="">选择月份</option>
</select>
<select id="days">
??? <option value="">选择日子</option>
</select>
</div>
</body>
</html>
?
