從日期選擇器中選擇日期時自動填充年齡字段

Question

我希望從datepicker.Right中選擇日期後，自動填充年齡字段現在日期選擇器不在代碼片段中工作不知道爲什麼。在PHP部分中也有工作年齡計算代碼。只要您選擇日期，就需要填寫年齡字段的幫助。我讀到了您需要ajax，但我無法真正解決這個問題。請幫忙，因爲我是這部分的初學者。

< script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" > < /script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0 - alpha.2/js/bootstrap.min.js " integrity=" 
 
sha384 - vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7 " crossorigin=" 
 
anonymous "></script> 
 
    <script src=" 
 
http: //cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script> 
 

 

 

 
    < script type = "text/javascript" > 
 
    $(document).ready(function() { 
 

 
    $('#datetimepicker8').datepicker({ 
 

 
     icons: { 
 
     time: "fa fa-clock-o", 
 
     date: "fa fa-calendar", 
 
     up: "fa fa-arrow-up", 
 
     down: "fa fa-arrow-down" 
 
     } 
 
    }); 
 
    }); 
 

 

 

 

 
< /script>

<?php 
 

 
$dob=$_POST['birthdate']; 
 
$dob=explode("/", 
 
$dob); 
 
$age=(date("md", 
 
date("U", 
 
mktime(0, 
 
0, 
 
0, 
 
$dob[0], 
 
$dob[1], 
 
$dob[2]))) > date("md") ? ((date("Y") - $dob[2]) - 1):(date("Y") - $dob[2])); 
 
echo"age is" $age; 
 
    
 
?>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" /> 
 
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" /> 
 

 
<form method="post" id="signUpForm"> 
 
    <div class="container" id="signupContainer"> 
 

 
    <div class="form-group row"> 
 
     <label class="col-sm-2 form-control-label">Birthdate</label> 
 
     <div class="col-sm-5"> 
 
     <div class='input-group date' id='datetimepicker8'> 
 
      <input type='text' id="birthdate" class="form-control" placeholder="D.O.B" name="birthdate" /> 
 
      <span class="input-group-addon"> 
 
      <i class="fa fa-calendar" aria-hidden="true"></i> 
 
     </span> 
 
     </div> 
 
     </div> 
 

 
     <label class="col-sm-1 form-control-label">Age:</label> 
 
     <div class="col-sm-4"> 
 
     <input type="text" id="age" class="form-control" name="age" placeholder="Age" /> 
 

 
     </div> 
 
    </div> 
 

 
    </div> 
 
</form>

Answer 1

試試這個代碼，不需要PHP代碼。出生日期是在datepicker onchange本身計算的。

$('#datetimepicker8').datepicker({ 

      icons: { 
      time: "fa fa-clock-o", 
      date: "fa fa-calendar", 
      up: "fa fa-arrow-up", 
      down: "fa fa-arrow-down" 
      }, 
    dateFormat: "dd/mm/yy" 
     }).on('change', function (ev) { 
        var selectDate = $('#datetimepicker8').val().split("/"); 

        var todayDate = new Date(); 
        var selectedDate = new Date(selectDate[2], selectDate[1], selectDate[0]); 
        var firstDate = new Date(todayDate.getFullYear(), todayDate.getMonth() + 1, todayDate.getDate()); 
        var diff = Math.floor(firstDate.getTime() - selectedDate.getTime()); 
        var day = 1000 * 60 * 60 * 24; 

        var days = Math.floor(diff/day); 
        var months = Math.floor(days/31); 
        var years = Math.floor(months/12); 

        if (years > 0) { 
         $('#age').val(years); 
        } else { 
         $('#age').val(''); 
        } 


        if (days <= -1) { 
         alert("Please select valid date of birth.") 
         $('#datetimepicker8').val(""); 
        } 
       });