基于javascript bootstrap实现生日日期联动选择
本文实例为大家分享了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> </select><span>年</span> </label> <labelclass="checkbox-inline"> <selectnode-type="birthday_month"name="birthday_m"id="birthday_m"> <optionvalue=""></option> </select><span>月</span> </label> <labelclass="checkbox-inline"> <selectnode-type="birthday_month"name="birthday_d"id="birthday_d"> <optionvalue=""></option> </select><span>日</span> </label> <inputtype="hidden"name="birth"id="birth"value="2016/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==0&&birth_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==0&&birth_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==0&&birth_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==0&&b_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");
}
}
如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程Bootstrap实战教程
以上就是本文的全部内容，希望对大家的学习有所帮助。