本文實例為大家分享了js實現(xiàn)日期聯(lián)動選擇的相關(guān)代碼，適用于生日的選擇，供大家參考，具體內(nèi)容如下

實現(xiàn)目標(biāo)：年月日三個select 輸入框，以及一個hidden的input，通過js獲取input的值，如果有值切是日期格式，年月日select為input中的時間。否則為空。年默認(rèn)區(qū)間段為1900年到當(dāng)今年份

本人使用了bootstrap，class請參照bootstrap的相關(guān)說明

下面是html 內(nèi)容：

<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 的實現(xiàn)：

//設(shè)置生日的轉(zhuǎn)換和獲取

  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>");

      }

    }

  );

  //根據(jù)后臺提供的數(shù)據(jù)，填充用戶的值

  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");

    }

  }

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。