Auto Age Calculation Field View In Html Form - view

Question

I am trying to auto calculate the field for age in my asp.net mvc form and post it to the form. I am using datetimepicker to derive the date of birth. Does anyone know how to calculate it just by using the date of birth and post it straight to the forms? Here is my view:
<script language="javascript">
$(document).ready(function () {
// DateA
$('#JSDateA')
.datetimepicker({ format: 'YYYY-MM-DD' });
<form asp-controller="Admin" asp-action="Edit"
method="post">
<div class="form-group row">
<div class="offset-sm-2 col-sm-5 ">
Update User
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2" asp-for="Dob">Birth Date :</label>
<div class="col-sm-5">
<input asp-for="Dob" asp-format="{0:yyyy-MM-dd}"
class="form-control" placeholder="YYYY-MM-DD" />
</div>
#{
// TODO: L09 Task 4d - Validation Message for Dob
}
</div>
<div class="form-group row">
<label class="control-label col-sm-2" for="Age">Age :</label>
<div class="col-sm-5">
<input type="text" id="age" asp-for="Age" class="form-control" />
</div>
</div>
<div class="form-group row">
<div class="offset-sm-2 col-sm-6">
<input type="submit" value="Update" class="btn btn-primary" />
</div>
</div>
#if (ViewData["Message"] != null)
{
<div class="form-group row">
<div class="offset-sm-2 col-sm-6">
<div class="alert alert-#ViewData["MsgType"]">
#Html.Raw(ViewData["Message"])
</div>
</div>
</div>
}
</form>

Answer 1

You can calculate age using js. By setting change event, calculate date and put it to age text field. Try this
$(document).ready(function(){
$("#txtDOB").change(function(){
var dob = $("#txtDOB").val();
if(dob != null || dob != ""){
$("#age").val(getAge(dob));
}
});
function getAge(birth) {
ageMS = Date.parse(Date()) - Date.parse(birth);
age = new Date();
age.setTime(ageMS);
ageYear = age.getFullYear() - 1970;
return ageYear;
}
});
Here is a example fiddle for you.

Answer 2

Before resolve your issue,you need know the following things:
1.If Dob in your model is type of DateTime,it will generate <input type="date">,you need set the html type="text",otherwise you will have two datepicker,one belongs to jquery ui,the other belongs to the default html5 datepicker.
2.jquery set input text value by using val().
3.You do not have any html element which has id="JSDateA",so what you did will never work.
Working Demo:
Model:
public class TestVM
{
public DateTime Dob { get; set; }
public int Age { get; set; }
}
View:
<form asp-controller="Admin" asp-action="Edit"
method="post">
<div class="form-group row">
<div class="offset-sm-2 col-sm-5 ">
Update User
</div>
</div>
<div class="form-group row">
<label class="control-label col-sm-2" asp-for="Dob">Birth Date :</label>
<div class="col-sm-5">
<input asp-for="Dob" asp-format="{0:yyyy-MM-dd}"
class="form-control" placeholder="YYYY-MM-DD" type="text" />
#*add type="text"*#
</div>
<div class="form-group row">
<label class="control-label col-sm-2" for="Age">Age :</label>
<div class="col-sm-5">
<input type="text" id="age" asp-for="Age" class="form-control" />
</div>
</div>
<div class="form-group row">
<div class="offset-sm-2 col-sm-6">
<input type="submit" value="Update" class="btn btn-primary" />
</div>
</div>
#if (ViewData["Message"] != null)
{
<div class="form-group row">
<div class="offset-sm-2 col-sm-6">
<div class="alert alert-#ViewData["MsgType"]">
#Html.Raw(ViewData["Message"])
</div>
</div>
</div>
}
</div>
</form>
The first way,you could write js like below(by using jquery UI Datepicker Widget):
#section Scripts{
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script language="javascript">
$(document).ready(function () {
$('#Dob')
.datepicker({
format: 'yyyy-MM-DD',
maxDate: '+0d',
yearRange: '1950:2021',
changeMonth: true,
changeYear: true,
onSelect: function (value, ui) {
var today = new Date(),
dob = new Date(value),
age = new Date(today - dob).getFullYear() - 1970;
$('#age').val(age);
}
});
})
</script>
}
Result:
The second way,you could write js like below(by using bootstrap-datetimepicker):
#section Scripts
{
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<script>
$(function () {
$('#Dob').datetimepicker();
$('#Dob').on('dp.change', function (e) {
var value = e.date.format(e.date._f);
var today = new Date(),
dob = new Date(value),
age = new Date(today - dob).getFullYear() - 1970;
$('#age').val(age);
})
});
</script>
}
Result2: