网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 基于javascript bootstrap实现生日日期联动选择
内容
    本文实例为大家分享了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");
        }
      }
    以上就是本文的全部内容，希望对大家的学习有所帮助。
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/20 9:39:08