您的位置：首页 > Web前端 > JavaScript

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

2009-02-14 18:23 786 查看

以下是代码：

<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;
}
}
}

function load()
{

var dDate = new Date();
var dCurYear = dDate.getFullYear();
for(var i=dCurYear-10;i<dCurYear+5;i++)
{
    option=document.createElement("option");
    option.value=i;
    option.appendChild(document.createTextNode(i));
    document.all.tbSelYear.appendChild(option);
    if(i==dCurYear)
    {
option.selected=true;
    }
}

for(var i=1;i<=12;i++)
{
    option=document.createElement("option");
    option.value=i;
    option.appendChild(document.createTextNode(i));
    document.all.tbSelMonth.appendChild(option);
    if(i==(dDate.getMonth()+1))
    {
        option.selected=true;
    }
}
}
</script>

<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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 语言 function date action 日历

相关文章推荐

新的分享

章节导航