原生 javascript 实现的年月日三级联动,可以完美的判断大小月、闰年的二月份等。
效果
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>javascript实现年月日三级联动-码农资源网(www.codesou.cn)</title>
</head>
<body>
<select name="year"></select>
<select name="month"></select>
<select name="day"></select>
</body>
<script>
SYT="-选择年份-";
SMT="-选择月份-";
SDT="-选择日期-";
BYN=50;//年份范围往前n年
AYN=5;//年份范围往后n年
function YMDselect(){
this.SelY=document.getElementsByName(arguments[0])[0];
this.SelM=document.getElementsByName(arguments[1])[0];
this.SelD=document.getElementsByName(arguments[2])[0];
this.DefY=this.SelD?arguments[3]:arguments[2];
this.DefM=this.SelD?arguments[4]:arguments[3];
this.DefD=this.SelD?arguments[5]:arguments[4];
this.SelY.YMD=this;
this.SelM.YMD=this;
this.SelY.onchange=function(){YMDselect.SetM(this.YMD)};
if(this.SelD)this.SelM.onchange=function(){YMDselect.SetD(this.YMD)};
YMDselect.SetY(this)
};
//设置年份
YMDselect.SetY=function(YMD){
dDate = new Date();
dCurYear = dDate.getFullYear();
YMD.SelY.options.add(new Option(SYT,'0'));
for(i = dCurYear+AYN; i>(dCurYear-BYN); i--){
YMDYT=i+'年';
YMDYV=i;
OptY = new Option(YMDYT,YMDYV);
YMD.SelY.options.add(OptY);
if(YMD.DefY==YMDYV) OptY.selected=true
}
YMDselect.SetM(YMD)
};
//设置月份
YMDselect.SetM=function(YMD){
YMD.SelM.length = 0;
YMD.SelM.options.add(new Option(SMT,'0'));
if(YMD.SelY.value>0){
for(var i=1;i<=12;i++){
YMDMT=i+'月';
YMDMV=i;
OptM=new Option(YMDMT,YMDMV);
YMD.SelM.options.add(OptM);
if(YMD.DefM==YMDMV) OptM.selected=true
}
}
if(YMD.SelD)YMDselect.SetD(YMD)
};
//设置日期
YMDselect.SetD=function(YMD){
YI=YMD.SelY.value;
MI=YMD.SelM.value;
YMD.SelD.length = 0;
YMD.SelD.options.add(new Option(SDT,'0'));
if(YI>0 && MI>0){
dPrevDate = new Date(YI, MI, 0);
daysInMonth=dPrevDate.getDate();
for (d = 1; d <= parseInt(daysInMonth); d++) {
YMDDT=d+'日';
YMDDV=d;
OptD=new Option(YMDDT,YMDDV);
YMD.SelD.options.add(OptD);
if(YMD.DefD==YMDDV)OptD.selected=true
}
}
}
new YMDselect('year','month','day');
</script>
</html>
使用说明
/**
* 年、月二级联动
* new YMDselect('year','month');
* new YMDselect('year','month',2010); //默认2010
* new YMDselect('year','month',2010,2); //默认2010年2月
**/
/**
* 年、月、日三级联动
* new YMDselect('year','month','day');
* new YMDselect('year','month','day',2020); //默认20020年
* new YMDselect('year','month','day',2020,6); //默认20020年6月
* new YMDselect('year','month','day',2020,6,22); //默认20020年6月22日
**/
想要了解更多内容,请持续关注码农资源网,一起探索发现编程世界的无限可能!
本站部分资源来源于网络,仅限用于学习和研究目的,请勿用于其他用途。
如有侵权请发送邮件至1943759704@qq.com删除
码农资源网 » javascript实现年月日三级联动
本站部分资源来源于网络,仅限用于学习和研究目的,请勿用于其他用途。
如有侵权请发送邮件至1943759704@qq.com删除
码农资源网 » javascript实现年月日三级联动