基于javascript bootstrap实现生日日期联动选择.docx
《基于javascript bootstrap实现生日日期联动选择.docx》由会员分享，可在线阅读，更多相关《基于javascript bootstrap实现生日日期联动选择.docx（6页珍藏版）》请在冰豆网上搜索。
基于javascriptbootstrap实现生日日期联动选择
基于javascriptbootstrap实现生日日期联动选择_
本文实例为大家分享了js实现日期联动选择的相关代码，适用于生日的选择，供大家参考，具体内容如下
实现目标：
年月日三个select输入框，以及一个hidden的input，通过js猎取input的值，假如有值切是日期格式，年月日select为input中的时间。
否则为空。
年默认区间段为1900年到当今年份
本人用法了bootstrap，class请参照bootstrap的相关说明
下面是html内容：
divclass="col-sm-9"
labelclass="checkbox-inline"
selectnode-type="birthday_year"name="birthday_y"id="birthday_y"
optionvalue=""/option
/selectspan年/span
/label
labelclass="checkbox-inline"
selectnode-type="birthday_month"name="birthday_m"id="birthday_m"
optionvalue=""/option
/selectspan月/span
/label
labelclass="checkbox-inline"
selectnode-type="birthday_month"name="birthday_d"id="birthday_d"
optionvalue=""/option
/selectspan日/span
/label
inputtype="hidden"name="birth"id="birth"value="2021/2/12"
labelclass='checkbox-inlinetext-warninghidden'id="birth_error_info"iclass='fafa-warning'请输入完整生日/i/label
/div
下面是js的实现：
//设置生日的转换和猎取
vardate=newDate（）;
varyear=date.getFullYear（）;
for（vari=year;i=1900;i--）{
$（"#birthday_y"）.append（"optionvalue="+i+"label="+i+""+i+"/option"）;
}
$（'#birthday_y'）.change（function（）{
varbirth_year=$（'#birthday_y'）.val（）;
if（birth_year!
=""）{
varbirth_month=$（'#birthday_m'）.val（）;
if（birth_month!
=""）{
if（birth_month=="2"）{
if（（birth_year%4==0birth_year%100!
=0）||（birth_year%400==0））{
$（"#birthday_d"）.append（"optionvalue="+29+"label="+29+""+29+"/option"）;
}else{
$（"#birthday_doption[value='29']"）.remove（）;
}
}
}else{
for（vari=1;i=12;i++）{
$（"#birthday_m"）.append（"optionvalue="+i+"label="+i+""+i+"/option"）;
}
}
}else{
$（"#birthday_m"）.html（"optionvalue=''/option"）;
$（"#birthday_d"）.html（"optionvalue=''/option"）;
}
checkBirthday（）;
}）;
$（'#birthday_m'）.change（function（）{
varbirth_year=$（'#birthday_y'）.val（）;
varbirth_month=this.value;
varbirth_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（"optionvalue=''/option"）;
for（vari=1;i=31;i++）{
$（"#birthday_d"）.append（"optionvalue="+i+"label="+i+""+i+"/option"）;
}
}else{
switch（$（"#birthday_doption:
last"）.attr（"value"））{
case"28":
$（"#birthday_d"）.append（"optionvalue="+29+""+29+"/option"）;
case"29":
$（"#birthday_d"）.append（"optionvalue="+30+""+30+"/option"）;
$（"#birthday_d"）.append（"optionvalue="+31+""+31+"/option"）;break;
case"30":
$（"#birthday_d"）.append（"optionvalue="+31+""+31+"/option"）;
break;
default:
break;
}
}
break;
case"4":
case"6":
case"9":
case"11":
if（birth_day==""）{
$（"#birthday_d"）.empty（）;
$（"#birthday_d"）.append（"optionvalue=''/option"）;
for（vari=1;i=30;i++）{
$（"#birthday_d"）.append（"optionvalue="+i+"label="+i+""+i+"/option"）;
}
}else{
switch（$（"#birthday_doption:
last"）.attr（"value"））{
case"28":
$（"#birthday_d"）.append（"optionvalue="+29+""+29+"/option"）;
case"29":
$（"#birthday_d"）.append（"optionvalue="+30+""+30+"/option"）;
case"31":
$（"#birthday_doption[value='31']"）.remove（）;
break;
default:
break;
}
}
break;
case"2":
if（birth_day==""）{
if（（birth_year%4==0birth_year%100!
=0）||（birth_year%400==0））{
for（vari=1;i=29;i++）{
$（"#birthday_d"）.append（"optionvalue="+i+"label="+i+""+i+"/option"）;
}
}else{
for（vari=1;i=28;i++）{
$（"#birthday_d"）.append（"optionvalue="+i+"label="+i+""+i+"/option"）;
}
}}else{
$（"#birthday_doption[value='31']"）.remove（）;
$（"#birthday_doption[value='30']"）.remove（）;
if（（birth_year%4==0birth_year%100!
=0）||（birth_year%400==0））{
}else{
$（"#birthday_doption[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（"optionvalue=''/option"）;
}
}
）;
//依据后台供应的数据，填充用户的值
varbirth_value=$（'#birth'）.val（）;
if（birth_value!
=""）{
vardate1=newDate（birth_value）;
varb_year=date1.getFullYear（）;
varb_month=date1.getMonth（）+1;
varb_day=date1.getDate（）;
$（"#birthday_y"）.find（"option[value='"+b_year+"']"）.attr（"selected","selected"）;
if（$（'#birthday_y'）.val（）!
=""）{
for（vari=1;i=12;i++）{
$（"#birthday_m"）.append（"optionvalue="+i+"label="+i+""+i+"/option"）;
}
}
$（"#birthday_m"）.find（"option[value='"+b_month+"']"）.attr（"selected","selected"）;
switch（b_month）{
case1:
case3:
case5:
case7:
case8:
case10:
case12:
for（vari=1;i=31;i++）{
$（"#birthday_d"）.append（"optionvalue="+i+"label="+i+""+i+"/option"）;
}
break;
case4:
case6:
case9:
case11:
$（"#birthday_d"）.append（"optionvalue=''/option"）;
for（vari=1;i=30;i++）{
$（"#birthday_d"）.append（"optionvalue="+i+"label="+i+""+i+"/option"）;
}
break;
case2:
if（（b_year%4==0b_year%100!
=0）||（b_year%400==0））{
for（vari=1;i=29;i++）{
$（"#birthday_d"）.append（"optionvalue="+i+"label="+i+""+i+"/option"）;
}
}else{
for（vari=1;i=28;i++）{
$（"#birthday_d"）.append（"optionvalue="+i+"label="+i+""+i+"/option"）;
}
}
break;
default:
break;
}
$（"#birthday_d"）.find（"option[value='"+b_day+"']"）.attr（"selected","selected"）;
}
//验证生日是否输入完整
functioncheckBirthday（）{
varb_year=$（'#birthday_y'）.val（）;
varb_month=$（'#birthday_m'）.val（）;
varb_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"）;
}
}
以上就是本文的全部内容，盼望对大家的学习有所关心。
...
升级会员 