根據datetimepicker選擇的日期計算年齡

首先上圖看一下實現的效果:


html:(切記input加上value)

    <div class="form-group">
      <div class="col-md-4 control-label">
        <label>出生日期:</label>
      </div>
      <div class="controls col-md-5">
        <input class="form-control calendar-item" name="birthday" type="text" id="birthday" value={{ activityMember.birthday|date('Y-m-d') }} readonly="true">
        <i class="es-icon es-icon-calendar text-xlg"></i>
      </div>
      <div class="text-left color-gray">
        <span class="mlm">年齡:</span><input class="js-get-age" type="text" name="age" value=""readonly="true">      
      </div>
    </div>

js:

  $('#birthday').change(function(){
    var strBirthday = $('#birthday').val();
    $('.js-get-age').val(jsGetAge(strBirthday));
  })

  function jsGetAge(strBirthday){         
    var returnAge;  
    var strBirthdayArr=strBirthday.split("-");  
    var birthYear = strBirthdayArr[0];  
    var birthMonth = strBirthdayArr[1];  
    var birthDay = strBirthdayArr[2];  
      
    d = new Date();  
    var nowYear = d.getFullYear();  
    var nowMonth = d.getMonth() + 1;  
    var nowDay = d.getDate();  
      
    if(nowYear == birthYear){  
      returnAge = 0;//同年 則爲0歲  
    }  
    else{  
      var ageDiff = nowYear - birthYear ; //年之差  
      if(ageDiff > 0){  
        if(nowMonth == birthMonth) {  
          var dayDiff = nowDay - birthDay;//日之差  
          if(dayDiff < 0)  
          {  
            returnAge = ageDiff - 1;  
          }  
          else  
          {  
            returnAge = ageDiff ;  
          }
        }  
        else  
        {  
          var monthDiff = nowMonth - birthMonth;//月之差  
          if(monthDiff < 0)  
          {  
            returnAge = ageDiff - 1;  
          }  
          else  
          {  
            returnAge = ageDiff ;  
          }  
        }  
      }  
      else  
      {  
        returnAge = -1;//返回-1 表示出生日期輸入錯誤 晚於今天  
      }  
    }    
    return returnAge;//返回週歲年齡     
  }  


總結一下就是:

1,給datepicker加一個change事件;

2,執行計算年齡的function;

3,將返回的週歲數賦給要輸出的標籤裏面。






發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章