auto-fill age field when date is selected from datepicker - php

Question

I want the age field to be automatically filled as soon as you select the date from the datepicker.Right now the datepicker is not working in the snippet dont know why.I do also have the working age calculation code in the php section.Only need help in filling the age field as soon as you select the date.I read that you need ajax for that but I couldnt really work that out. Please do help as I am a beginner working on this part.
< 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

Try this code, php code is not required. Date of birth is calculated in datepicker onchange itself.
$('#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("");
}
});