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

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

<div class="col-sm-9"><label class="checkbox-inline"><select node-type="birthday_year" name="birthday_y" id="birthday_y"><option value=""></option> </select><span>年</span></label><label class="checkbox-inline"><select node-type="birthday_month" name="birthday_m" id="birthday_m"><option value=""></option> </select><span>月</span></label><label class="checkbox-inline"><select node-type="birthday_month" name="birthday_d" id="birthday_d"><option value=""></option> </select><span>日</span></label><input type="hidden" name="birth" id="birth" value="2016/2/12"><label class="checkbox-inline text-warning hidden" id="birth_error_info"><i class="fa fa-warning">请输入完整生日</i></label></div>

下面是js 的实现：

//设置生日的转换和获取var date=new Date（）;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 && birth_year%100！=0） || （birth_year%400==0））{$（"#birthday_d"）.append（"<option value=" + 29 + " label=" + 29 + ">" + 29 + "</option>"）;}else{$（"#birthday_d option[value="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=""></option>"）;$（"#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（birth_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>"）;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（）;$（"#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（"<option value=" + 30 + " >" + 30 + "</option>"）;case "31":$（"#birthday_d option[value="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++）{$（"#birthday_d"）.append（"<option value="+i+" label="+i+">"+i+"</option>"）;}}}else{$（"#birthday_d option[value="31"]"）.remove（）;$（"#birthday_d option[value="30"]"）.remove（）;if（（birth_year%4==0 && birth_year%100！=0） || （birth_year%400==0））{ }else{$（"#birthday_d option[value="29"]"）.remove（）;}}break;default :break;}}checkBirthday（）;}）; $（"#birthday_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.getFullYear（）;var b_month=date1.getMonth（）+1;var b_day=date1.getDate（）;$（"#birthday_y"）.find（"option[value=""+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（"option[value=""+b_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; 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+">"+i+"</option>"）;}}break;default :break;}$（"#birthday_d"）.find（"option[value=""+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"）;}}

以上就是本文的全部内容，希望对大家的学习有所帮助。