从日期选择器中选择日期时自动填充年龄字段

Question

我希望在您从 datepicker 中选择日期后立即自动填充年龄字段。现在 datepicker 在 sn-p 中不工作不知道为什么。我也有工作年龄计算代码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("");
                    }
                });