飞度网
转到手机版您现在的位置: 飞度网电脑/网络正文
扫码穿越到手机

[ 字号:    来源:互联网 2007-6-22 15:00:00 ]
JS实现动态的日期选择表单,使用方法:
showDateSelect("date1");
其中参数为表单项select的名称,然后可以用date1.value获取选择的日期。
<html>
<head>
<title> 动态的日期选择表单 </title>
<meta http-equiv="Content-Type" content="text/html" charset="gb2312">
<script language="JavaScript">
<!--
function yearList(num){
var d=new Date();
var t=d.getFullYear();
var yStr="";
for(var i=t-num;i<=t+num;i++){
yStr=yStr+"<option value='"+i+(i==t?"' selected>":"'>")+i+"</option>";
}
return yStr;
}
function monthList(){
var d=new Date();
var t=d.getMonth()+1;
mStr="";
for(var i=1;i<=12;i++){
mStr=mStr+"<option value='"+i+(i==t?"' selected>":"'>")+i+"</option>";
}
return mStr;
}
function dateList(fName){
var d=new Date();
var t=document.all[fName+"_dd"].value==""?d.getDate():document.all[fName+"_dd"].value;
d=new Date(document.all[fName+"_yy"].value+"/"+document.all[fName+"_mm"].value+"/1");
dStr="";
for(var i=1;i<=31;i++){
d.setDate(i);
if(d.getDate()!=i){break;}
dStr=dStr+"<option value='"+i+(i==t?"' selected>":"'>")+i+"</option>";
}
document.all[fName+"_dx"].innerHTML="<select name='"+fName+"_dd' onchange='javascript:setDateValue(\""+fName+"\");'>"+dStr+"</select>";
}
function setDateValue(name){
var dValue=document.all[name+"_yy"].value+"-"+document.all[name+"_mm"].value+"-"+document.all[name+"_dd"].value;
document.all[name].value=dValue;
}
function showDateSelect(name){
document.write("<select name='"+name+"_yy' onchange='javascript:dateList(\""+name+"\");setDateValue(\""+name+"\");'>"+yearList(10)+"</select>");
document.write("<select name='"+name+"_mm' onchange='javascript:dateList(\""+name+"\");setDateValue(\""+name+"\");'>"+monthList()+"</select>");
document.write("<span id='"+name+"_dx'><select name='"+name+"_dd'>"+"</select></span>");
dateList(name);
document.write("<input type='hidden' name='"+name+"' value=''>");
setDateValue(name);
}
//-->
</script>
</head>
<body>
<center><h3>动态日期选择表单示例</h3></center>
<table align="center" width="300" cellspacing="1" cellpadding="5" border >
<FORM METHOD=POST ACTION="" onsubmit="alert('date1:'+this.date1.value+'\ndate2:'+this.date2.value+'\ndate3:'+this.date3.value);return false;">
<tr> <td>日期1: <script language="JavaScript">showDateSelect("date1");</script></td>
</tr> <tr> <td>日期2: <script language="JavaScript">showDateSelect("date2");</script></td>
</tr> <tr> <td>日期3: <script language="JavaScript">showDateSelect("date3");</script></td>
</tr> <tr> <td><CENTER><INPUT TYPE="submit" value="SUBMIT"></CENTER></td>
</tr> </FORM>
</table>
</body>
</html>
·分享到:
·看完后,您有任何想法或观点,请立即参与评论
·或者:向飞度网提问 留言 举报 纠错
·更多关于  JS 日期 选择 表单 编程 网页技术 的内容
 
站内搜索:
·相关评论
·我来评论
评论内容(必填)

注:评论内容限200字,不支持图片和链接。
您的姓名(选填): 
注:姓名所有人可见,可以填写昵称。
联系方式(选填): 
注:联系方式仅管理员可见,推荐填写电子邮箱。
评价(选填): 
不好
验证码(必填): 
验证码,看不清楚?请点击刷新验证码
版权与免责声明:
1. 凡注明来源为“飞度网”(faydo.com 以下简称为"本站")的所有作品(文章、资料),包括文字与图片,除特殊注明外均可转载,但必须保留版权信息并回链。违反上述声明者,本站将依法追究法律责任。
2. 凡未注明来源的作品(文章、资料),均转载自互联网,本站转载的目的在于传播更多信息,此类作品(文章、资料)并不代表本站观点,本网不承担此类作品侵权行为的直接责任及连带责任。
3. 如因作品内容、版权等需要同本站联系的,请使用页面底部的联系方式。
4. 本站竭力确保所刊载的作品(文章、资料)准确可靠,但不保证该等资料绝对正确可靠;对于任何因资料不确或遗漏又或因根据或依赖本站资料所作决定、行动或不行动而引致的损失或损害,本站概不负责(不论是民事侵权行为责任或合约责任或其他)。
5. 网友评论不代表本站观点。
设为首页 收藏本页 留言与建议 网站地图
©2016 飞度网 版权所有 联系方式:请邮件联系或msn联系。