JavaScript用select实现日期控件
代码很简单，这里就不多废话了，直接给大家源码吧
<!doctypehtml>
<html>
<head>
<title>年月日</title>
</head>
<bodyonLoad="init()">
<selectid="year"onChange="swap_day()"></select>年
<selectid="month"onChange="swap_day()"></select>月
<selectid="day"></select>日
</body>
<script>
varmonth_big=newArray("1","3","5","7","8","10","12");//包含所有大月的数组
varmonth_small=newArray("4","6","9","11");//包含所有小月的数组
//页面加载时调用的初始化select控件的option的函数
functioninit()
{
varselect_year=document.getElementById("year");//获取id为"year"的下拉列表框
varselect_month=document.getElementById("month");//获取id为"month"的下拉列表框
varselect_day=document.getElementById("day");//获取id为"day"的下拉列表框
//将年份选项初始化，从1980到2000
for(vari=1980;i<=2000;i++)
{
select_year_option=newOption(i,i);
select_year.options.add(select_year_option);
}
//将月份选项初始化，从1到12
for(vari=1;i<=12;i++)
{
select_month_option=newOption(i,i);
select_month.options.add(select_month_option);
}
//调用swap_day函数初始化日期
swap_day();
}
//判断数组array中是否包含元素obj的函数，包含则返回true，不包含则返回false
functionarray_contain(array,obj)
{
for(vari=0;i<array.length;i++)
{
if(array[i]===obj)
{
returntrue;
}
}
returnfalse;
}
//根据年份和月份调整日期的函数
functionswap_day()
{
varselect_year=document.getElementById("year");//获取id为"year"的下拉列表框
varselect_month=document.getElementById("month");//获取id为"month"的下拉列表框
varselect_day=document.getElementById("day");//获取id为"day"的下拉列表框
select_day.options.length=0;//在调整前先清空日期选项里面的原有选项
varmonth=select_month.options[select_month.selectedIndex].value;//获取被选中的月份month
//如果month被包含在month_big数组中，即被选中月份是大月，则将日期选项初始化为31天
if(array_contain(month_big,month))
{
for(vari=1;i<=31;i++)
{
select_day_option=newOption(i,i);
select_day.options.add(select_day_option);
}
}
//如果month被包含在month_small数组中，即被选中月份是小月，则将日期选项初始化为30天
elseif(array_contain(month_small,month))
{
for(vari=1;i<=30;i++)
{
select_day_option=newOption(i,i);
select_day.options.add(select_day_option);
}
}
//如果month为2，即被选中的月份是2月，则调用initFeb()函数来初始化日期选项
else
{
initFeb();
}
}
//判断年份year是否为闰年，是闰年则返回true，否则返回false
functionisLeapYear(year)
{
vara=year%4;
varb=year%100;
varc=year%400;
if(((a==0)&&(b!=0))||(c==0))
{
returntrue;
}
returnfalse;
}
//根据年份是否闰年来初始化二月的日期选项
functioninitFeb()
{
varselect_year=document.getElementById("year");//获取id为"year"的下拉列表框
varselect_day=document.getElementById("day");//获取id为"day"的下拉列表框
varyear=parseInt(select_year.options[select_year.selectedIndex].value);//获取被选中的年份并转换成Int
//如果是闰年，则将日期选项初始化为29天
if(isLeapYear(year))
{
for(vari=1;i<=29;i++)
{
select_day_option=newOption(i,i);
select_day.options.add(select_day_option);
}
}
//如果不是闰年，则将日期选项初始化为28天
else
{
for(vari=1;i<=28;i++)
{
select_day_option=newOption(i,i);
select_day.options.add(select_day_option);
}
}
}
</script>
</html>
以上所述就是本文的全部内容了，希望大家能够喜欢。