一个日期选择的二级联动下拉框

最新推荐文章于 2020-07-30 21:30:44 发布

xiaolongyiqi

最新推荐文章于 2020-07-30 21:30:44 发布

阅读量861

点赞数

CC 4.0 BY-SA版权

文章标签： date function input html

本文链接：https://blog.youkuaiyun.com/xiaolongyiqi/article/details/3344130

本文介绍了一个使用HTML和JavaScript实现的简单日期选择器。通过下拉菜单选择年、月、日，可以自动显示所选日期对应的星期几。该示例展示了如何动态生成下拉选项并计算日期。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<head>
<title>下拉菜单选择日期</title>
<meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312">
</head>
<script>
var   arr="日一二三四五六".split("");
function   toDate()
{
   with(document.all){
    vYear=parseInt(year.value)
    vMonth=parseInt(month.value)
   day.length=0;
    for(i=0;i<(new Date(vYear,vMonth,0)).getDate();i++)
    {
     day.length=i+1;
     day.options[i].value=i+1;
     day.options[i].text=i+1;
    }
   }
today();
}
function   today()
{
   vDay=f1.day.value;
   document.f1.t1.value="星期"+arr[new Date(vYear,vMonth-1,vDay).getDay()];
}
</script>
<body   onLoad="toDate()">
<form   name="f1">
<select   id=year   onchange=toDate()>
<script>
dt=new Date();
yr=dt.getYear();
for(i=1970;i<=yr;i++)
{
       document.write("<option   value="+i+">"+i+"</option>");
    }
</script>
</select>
年
<select   id=month   onchange=toDate()>
<script>
for(i=1;i<=12;i++)
{
       document.write("<option   value="+i+">"+i+"</option>");
    }
</script>
</select>
月
<select   id=day   onChange="today()"></select>
日
<input   name=t1>
</form>
</body>
</html>