基于javascript bootstrap实现生日日期联动选择.docx

1、基于javascript bootstrap实现生日日期联动选择基于javascript bootstrap实现生日日期联动选择_ 本文实例为大家分享了js实现日期联动选择的相关代码，适用于生日的选择，供大家参考，具体内容如下 实现目标：年月日三个select 输入框，以及一个hidden的input，通过js猎取input的值，假如有值切是日期格式，年月日select为input中的时间。否则为空。年默认区间段为1900年到当今年份 本人用法了bootstrap，class请参照bootstrap的相关说明 下面是html 内容： div class=col-sm-9 label class

2、=checkbox-inline select node-type=birthday_year name=birthday_y id=birthday_y option value=/option /selectspan年/span /label label class=checkbox-inline select node-type=birthday_month name=birthday_m id=birthday_m option value=/option /selectspan月/span /label label class=checkbox-inline select node-

3、type=birthday_month name=birthday_d id=birthday_d option value=/option /selectspan日/span /label input type=hidden name=birth id=birth value=2021/2/12 label class=checkbox-inline text-warning hidden id=birth_error_infoi class=fa fa-warning请输入完整生日/i/label /div 下面是js 的实现： /设置生日的转换和猎取 var date=new Date(

4、); var year=date.getFullYear(); for(var i=year;i=1900;i-) $(#birthday_y).append(option value=+i+ label=+i+i+/option); $(#birthday_y).change(function() var birth_year=$(#birthday_y).val(); if(birth_year!=) var birth_month=$(#birthday_m).val(); if(birth_month!=) if(birth_month=2) if(birth_year%4=0 bir

5、th_year%100!=0) | (birth_year%400=0) $(#birthday_d).append(option value= + 29 + label= + 29 + + 29 + /option); else $(#birthday_d optionvalue=29).remove(); else for (var i = 1; i = 12; i+) $(#birthday_m).append(option value= + i + label= + i + + i + /option); else $(#birthday_m).html(option value=/o

6、ption); $(#birthday_d).html(option value=/option); checkBirthday(); ); $(#birthday_m).change(function() var birth_year=$(#birthday_y).val(); var birth_month=this.value; var birth_day=$(#birthday_d).val(); if(birth_month!=) switch (birth_month) case 1:case 3:case 5:case 7:case 8:case 10:case 12: if(b

7、irth_day=) $(#birthday_d).empty(); $(#birthday_d).append(option value= /option); for (var i = 1; i = 31; i+) $(#birthday_d).append(option value= + i + label= + i + + i + /option); else switch ($(#birthday_d option:last).attr(value) case 28:$(#birthday_d).append(option value= + 29 + + 29 + /option);

8、case 29:$(#birthday_d).append(option value= + 30 + + 30 + /option); $(#birthday_d).append(option value= + 31 + + 31 + /option);break; case 30:$(#birthday_d).append(option value= + 31 + + 31 + /option); break; default :break; break; case 4:case 6:case 9: case 11: if(birth_day=) $(#birthday_d).empty()

9、; $(#birthday_d).append(option value= /option); for (var i = 1; i = 30; i+) $(#birthday_d).append(option value= + i + label= + i + + i + /option); else switch ($(#birthday_d option:last).attr(value) case 28:$(#birthday_d).append(option value= + 29 + + 29 + /option); case 29:$(#birthday_d).append(opt

10、ion value= + 30 + + 30 + /option); case 31:$(#birthday_d optionvalue=31).remove(); break; default :break; break; case 2: if(birth_day=) if(birth_year%4=0 birth_year%100!=0) | (birth_year%400=0) for(var i=1;i=29;i+) $(#birthday_d).append(option value=+i+ label=+i+i+/option); else for(var i=1;i=28;i+)

11、 $(#birthday_d).append(option value=+i+ label=+i+i+/option); else $(#birthday_d optionvalue=31).remove(); $(#birthday_d optionvalue=30).remove(); if(birth_year%4=0 birth_year%100!=0) | (birth_year%400=0) else $(#birthday_d optionvalue=29).remove(); break; default :break; checkBirthday(); ); $(#birth

12、day_d).change(function() checkBirthday(); ); $(#birthday_d).focus( function() if($(#birthday_m).val()=) $(#birthday_d).empty(); $(#birthday_d).append(option value= /option); ); /依据后台供应的数据，填充用户的值 var birth_value=$(#birth).val(); if(birth_value!=) var date1 = new Date(birth_value); var b_year=date1.ge

13、tFullYear(); var b_month=date1.getMonth()+1; var b_day=date1.getDate(); $(#birthday_y).find(optionvalue=+b_year+).attr(selected,selected); if($(#birthday_y).val()!=) for (var i = 1; i = 12; i+) $(#birthday_m).append(option value= + i + label= + i + + i + /option); $(#birthday_m).find(optionvalue=+b_

14、month+).attr(selected,selected); switch (b_month) case 1:case 3:case 5:case 7:case 8:case 10:case 12: for (var i = 1; i = 31; i+) $(#birthday_d).append(option value= + i + label= + i + + i + /option); break; case 4:case 6:case 9: case 11: $(#birthday_d).append(option value= /option); for (var i = 1;

15、 i = 30; i+) $(#birthday_d).append(option value= + i + label= + i + + i + /option); break; case 2: if(b_year%4=0 b_year%100!=0) | (b_year%400=0) for(var i=1;i=29;i+) $(#birthday_d).append(option value=+i+ label=+i+i+/option); else for(var i=1;i=28;i+) $(#birthday_d).append(option value=+i+ label=+i+

16、i+/option); break; default :break; $(#birthday_d).find(optionvalue=+b_day+).attr(selected,selected); /验证生日是否输入完整 function checkBirthday() var b_year= $(#birthday_y).val(); var b_month=$(#birthday_m).val(); var b_day=$(#birthday_d).val(); if(b_year!=b_month!=b_day!=) $(#birth).val(b_year+-+b_month+-+b_day); $(#birth_error_info).addClass(hidden); else $(#birth).val(); $(#birth_error_info).removeClass(hidden); 以上就是本文的全部内容，盼望对大家的学习有所关心。 .