지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > javascript bootstrap_javascript 기술을 기반으로 생일 날짜 연계 선택 구현

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

WBOY
풀어 주다： 2016-05-16 15:06:23
원래의
1520명이 탐색했습니다.

본 글의 예시는 생일 선택에 적합한 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");
    }
  }
로그인 후 복사

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

관련 라벨：
javascript生日日期选择 javascript日期联动选择 javascript日期选择
원천：php.cn
이전 기사：JS_javascript 기술에서 의사 요소를 제어하는 ​​방법 요약 다음 기사：link_javascript 스킬에 마우스 위치 시 텍스트 스크롤을 구현하는 JS 메소드
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
vue vee-validate는 날짜 선택기 선택 문제를 포착합니다. 내 datepicker 필드의 v-model 바인딩이 제대로 작동하지 않습니다. 선택하면 화면에 실시간으로 업데이트되지만 formValues ​​반응형 개체에 값...
에서 2024-04-06 11:38:56
0
1
510
두 개의 별도 테이블에서 판매 데이터를 요약할 때 MySQL 문제 귀하의 지원에 미리 감사드립니다. 저는 SQL을 배우고 사용할 데이터를 생성하고 있지만 한 가지 간단한 문제에 봉착했습니다. 아래 스크린샷의 테이블은 지역 및 날...
에서 2024-04-04 14:22:13
0
2
343
Laravel 배열에서 값을 제거하는 방법 저는 매우 기본적인 당일 예약 시스템을 만들려고 하는데 범위의 모든 날짜를 반환한 다음 해당 범위에서 선택한 날짜를 제거해야 합니다. 다음 코드를 시도했지만 이것...
에서 2024-03-31 21:54:37
0
1
394
신용/직불카드 만료일 형식으로 날짜를 생성하는 방법은 무엇입니까? 신용/직불 카드 만료 날짜 형식과 같은 'Thru:12/20' 형식으로 날짜를 생성해야 합니다. 이 형식으로 날짜를 생성하는 가장 좋은 방법은 무엇입니까? new...
에서 2024-03-31 20:06:54
0
2
405
Livewire 및 flatpickr: 빈 데이터 처리 시 변경 사항 면책 조항: Livewire와 flatpickr를 연결하는 방법에 대해 몇 가지 질문이 있다는 것을 알고 있지만 제공된 솔루션은 문제에 접근하는 방식과 매우 다르...
에서 2024-03-31 17:22:58
0
2
367
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿