基於javascript bootstrap實現生日日期聯動選擇，bootstrap城市聯動

基於javascript bootstrap實現生日日期聯動選擇，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");    }  }

以上就是本文的全部內容，希望對大家的學習有所協助。

您可能感興趣的文章:

• javascript 表單日期選擇效果
• input 日期選擇功能的javascript代碼
• javascript 日期聯動選取器 [其中的一些代碼值得學習]
• js實現一個省市區三級聯動選擇框代碼分享
• Js日期選擇自動填滿到輸入框(介面漂亮相容Firefox)
• Ext JS 4實現帶week(星期)的日期選擇控制項(實戰一)
• Ext JS 4實現帶week(星期)的日期選擇控制項(實戰二)
• JSON+HTML實現國家省市聯動選擇效果
• JS簡單實現城市二級聯動選擇外掛程式的方法