原生js实现日期联动
月份的判定，由于涉及到过多了判定条件，如果用ifelse会大大降低性能，建议用switch语法
代码如下：
getDays:function(year,month){
//varaDay=[31,28|29,31,30,31,30,31,31,30,31,30,31];
//二月份的天数数据处理
varFedDays=year%4==0?29:28,
returnDays='';
varmonth=month<10?month='0'+month:month.toString();
switch(month){
case'01':
case'03':
case'05':
case'07':
case'08':
case'10':
case'12':returnDays=31;break;
case'04':
case'06':
case'09':
case'11':returnDays=30;break;
case'02':returnDays=FedDays;break;
}
returnreturnDays;
}
完整的源代码：
/* author:laoguoyong
------------------------------
日期三级联动,范围选择
------------------------------
参数
*[String]targets:'#year,#month,#day'；年，月，日的id
*[String]range:'2013-02-03,2019-09-21'；范围，正确格式为xxxx-xx-xx
----为了节省代码，请传入正确的日期范围参数
----错误示范：
（1）range:'2013-02-03,2019-9-21'是不对的，注意日期格式
（2）range:'2013-02-03'是不对的，请输入完整的范围之值
（3）range:'2013-02-03,2016-02-30'是不对的，2月没有30天
（3）range:'2013-02-03,2011-02-30'是不对的，范围错误了
*
*/
functionGySetDate(opt){
//elem
vartargets=opt.targets.split(',');
this.eYear=this.getId(targets[0].slice(1));
this.eMonth=this.getId(targets[1].slice(1));
this.eDay=this.getId(targets[2].slice(1));
if(!this.eYear||!this.eMonth||!this.eDay)return;
//范围值
varr=opt.range.indexOf(','),
aStarts=opt.range.slice(0,r).split('-'),//转为：['2013','05','20']
aEnds=opt.range.slice(r+1,opt.range.length).split('-');//转为：['2018','08','20']
//Number类型
this.startYear=parseInt(aStarts[0],10);
this.startMonth=parseInt(aStarts[1],10);
this.startDay=parseInt(aStarts[2],10);
this.endYear=parseInt(aEnds[0],10);
this.endMonth=parseInt(aEnds[1],10);
this.endDay=parseInt(aEnds[2],10);
this.init(); } GySetDate.prototype={ init:function(){ var_that=this; //初始化日期 this.setYears({'start':this.startYear,'end':this.endYear}); this.setMonths({'start':this.startMonth}); this.setDays({'year':this.startYear,'month':this.startMonth,'start':this.startDay}); //年选择 this.eYear.onchange=function(){ varyear=parseInt(this.value); switch(true){ case(year==_that.startYear):{ _that.setMonths({'start':_that.startMonth}); _that.setDays({'year':_that.startYear,'month':_that.startMonth,'start':_that.startDay}); };break; case(year==_that.endYear):{ _that.setMonths({'start':1,'end':_that.endMonth}); if(_that.endMonth>1){ _that.setDays({'year':_that.endYear,'month':1,'start':1}); }else{ _that.setDays({'year':_that.endYear,'month':1,'start':1,'end':_that.endDay}); } };break; default:{ _that.setMonths({'start':1}); _that.setDays({'start':1,'year':year,'month':1}); } } } //月选择 this.eMonth.onchange=function(){ varyear=parseInt(_that.eYear.options[_that.eYear.selectedIndex].value), month=parseInt(this.value); switch(true){ case(year==_that.endYear&&month==_that.endMonth):{ _that.setDays({'start':1,'year':year,'month':month,'end':_that.endDay}); };break; case(year==_that.startYear&&month==_that.startMonth):{ _that.setDays({'year':_that.startYear,'month':_that.startMonth,'start':_that.startDay}); };break; default:{ _that.setDays({'start':1,'year':year,'month':month}); } } } }, /*设置年，月，日 ---------------------------------- 参数值都为Number类型 */ //参数{'start':xx,'end':xxx} setYears:function(opt){ this.eYear.innerHTML=''; for(varn=opt.start;n<=opt.end;n++){ this.eYear.add(newOption(n,n)); } }, //参数{'start':xx,'end':xxx} //参数'end'为可选，忽略，则开始到12月 setMonths:function(opt){ this.eMonth.innerHTML=''; varmonths=opt.end||12; for(varn=opt.start;n<=months;n++){ if(n<10)n='0'+n; this.eMonth.add(newOption(n,n)); } }, //参数{'start':xx,'year':xxx,'month':xx,'star':xx,'end':xxx} //参数'end'为可选，忽略，则开始到本月底（根据月份判断的） setDays:function(opt){ this.eDay.innerHTML=''; vardays=opt.end||this.getDays(opt.year,opt.month); for(varn=opt.start;n<=days;n++){ if(n<10)n='0'+n; this.eDay.add(newOption(n,n)); } }, /*根据年，月，返回正确的天数，如2016-2，返回是29天（润年） -------------------------------------------------------------- 参数值都为Number类型 */ getDays:function(year,month){ //varaDay=[31,28|29,31,30,31,30,31,31,30,31,30,31]; //二月份的天数数据处理 varFedDays=year%4==0?29:28, returnDays=''; varmonth=month<10?month='0'+month:month.toString(); switch(month){ case'01': case'03': case'05': case'07': case'08': case'10': case'12':returnDays=31;break; case'04': case'06': case'09': case'11':returnDays=30;break; case'02':returnDays=FedDays;break; } returnreturnDays; }, /*工具辅助函数 ---------------------------------- */ getId:function(id){ returndocument.getElementById(id); } }