javascript bootstrap_javascript 기술을 기반으로 생일 날짜 연계 선택 구현

본 글의 예시는 생일 선택에 적합한 js의 날짜 연계 선택 구현 관련 코드를 공유하고 있으며, 구체적인 내용은 다음과 같습니다

목표 달성: 연도, 월, 일에 대한 세 개의 선택 입력 상자와 js를 통해 입력 값을 가져옵니다. 값이 있으면 날짜 형식이며 연, 월, 일이 선택됩니다. 입력 시간입니다. 그렇지 않으면 비어 있습니다. 기본 연도 범위는 1900년부터 현재 연도까지입니다

부트스트랩을 사용하고 있으니 수업시 부트스트랩 관련 안내를 참고해주세요

다음은 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");
    }
  }

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.