Javascript语言用3个列表框(select)实现的年、月、日三级联动

最新推荐文章于 2024-03-29 14:52:40 发布

tlnyhl

最新推荐文章于 2024-03-29 14:52:40 发布

阅读量707

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript 语言 function date action 日历

本文链接：https://blog.youkuaiyun.com/tlnyhl/article/details/3890484

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用HTML和JavaScript实现的简单日期选择器。该选择器可根据用户选定的年份和月份动态更新对应的天数选项。

以下是代码：

<HTML>
<HEAD>
<TITLE>日历</TITLE>
</HEAD>
<BODY onload="load()">
<SCRIPT LANGUAGE="JavaScript">
function TGetDaysInMonth(iMonth, iYear) {
var dPrevDate = new Date(iYear, iMonth, 0);
return dPrevDate.getDate();
}

function TUpdateCal(iYear, iMonth) {
var dDate=new Date();
daysInMonth = TGetDaysInMonth(iMonth, iYear);
while(document.all.tbSelDay.childNodes.length>0)
{
document.all.tbSelDay.removeChild(document.all.tbSelDay.childNodes[0]);
}

for (d = 1; d <= parseInt(daysInMonth); d++) {
option=document.createElement("option");
option.value=d;
option.appendChild(document.createTextNode(d));
document.all.tbSelDay.appendChild(option);
if(d==dDate.getDate())
{
option.selected=true;
}
}
}

<form name="frmCalendarSample" method="post" action="">
年：
<select name="tbSelYear" onchange='TUpdateCal(frmCalendarSample.tbSelYear.value, frmCalendarSample.tbSelMonth.value)'>
</select>
月：
<select name="tbSelMonth" style="width: 50px" onchange='TUpdateCal(frmCalendarSample.tbSelYear.value, frmCalendarSample.tbSelMonth.value)'>
</select>
日：
<select name="tbSelDay"></select>
<script language="JavaScript">
TUpdateCal(frmCalendarSample.tbSelYear.value, frmCalendarSample.tbSelMonth.value);
</script>
</form>
</BODY>
</HTML>

你也可以直接下载：

http://cn.ziddu.com/download/264275/date.txt.html