你的位置:首页 > Java教程

[Java教程]js 联动实现日期选择,一般用作生日


实现目标:年月日三个select 输入框,以及一个hidden的input,通过js获取input的值,如果有值切是日期格式,年月日select为input中的时间。否则为空。年默认区间段为1900年到当今年份

本人使用了bootstrap,class请参照bootstrap的相关说明

下面是html 内容:

 <div >                    <label >                      <select node-type="birthday_year" name="birthday_y" id="birthday_y">                        <option value=""></option>                      </select><span>年</span>                    </label>                    <label >                      <select node-type="birthday_month" name="birthday_m" id="birthday_m">                        <option value=""></option>                      </select><span>月</span>                    </label>                    <label >                      <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");    }  }

  仅供参考,欢迎批评指正!