我是 JS 的初学者。我可以用以下代码计算年龄。这段代码完美地用于多年计算。如果我把日期放在12 之后(例如任何月份的 然后显示 NaN 年。现在我要显示年龄年,月,日来自任何人的生日。有人可以帮我这个吗?提前谢谢。
$(document).ready(function ()
{
console.log($(document).width());
$('#datepicker').datepicker
({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
yearRange: '1900:2150',
maxDate: new Date(),
inline: true,
onSelect: function() {
var birthDay = document.getElementById("datepicker").value;
var DOB = new Date(birthDay);
var today = new Date();
var age = today.getTime() - DOB.getTime();
age = Math.floor(age / (1000 * 60 * 60 * 24 * 365.25));
document.getElementById('agecal').innerText = age;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div class="form-group">
<label for="datepicker">Date of Birth: <span style="color:red">*</span></label>
<input type="text" id="datepicker" name="date_of_birth" class="form-control" placeholder="Insert your Date of Birth...">
</div>
<div class="form-group">
<label for="agecal">Age as On(<?php echo date('d/m/Y'); ?>): <span id="agecal" style="background-color:#60ab59;padding: 0px 50px 0px 50px;color: white;font-weight: bold; border-radius: 5px;" >0</span></label>
</div>
答案 0 :(得分:0)
我用你的代码做了一个小小提琴,并且能够通过以下方式获得改变:
链接:https://jsfiddle.net/suvartheec/zrhpmrgs/2/
说明:我使用你通过减去两次(现在和b'day)得到的毫秒来创建一个新的日期变量。这给了我们一个相对于1970年1月的日期(因为该日期计算为自1970年1月1日00:00:00 UTC以来经过的时间,忽略了闰秒。来源:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) 所以我减去了70并得到了多少年。
var elapsed = new Date(age);
document.getElementById('agecal').innerText = elapsed.getYear()-70;
这是一个粗略的想法,但这应该让你去。
编辑:更新了小提琴:https://jsfiddle.net/suvartheec/zrhpmrgs/3/
日期大于12的NaN的原因是JS中的固有日期格式是mm / dd / yy。更改datepicker配置以发送该格式的日期可以解决这个问题。或者您必须在onSelect函数中将其翻译为将其与其余代码兼容的表单。
希望这有帮助。
答案 1 :(得分:0)
好的,我已经找到了问题。首先,NaN
返回,因为两个日期格式不相同。现在我将它从mm/dd/yy
转换为dd/mm/yy
。我得到了分别使用getMonth()
和getDay()
计算月数和天数。
$(document).ready(function ()
{
console.log($(document).width());
$('#datepicker').datepicker
({
dateFormat: 'mm/dd/yy',
changeMonth: true,
changeYear: true,
yearRange: "-100:+0",
maxDate: new Date(),
inline: true,
onSelect: function() {
var birthDay = document.getElementById("datepicker").value;
var DOB = new Date(birthDay);
var today = new Date();
var age = today.getTime() - DOB.getTime();
var elapsed = new Date(age);
var year = elapsed.getYear()-70;
var month = elapsed.getMonth();
var day = elapsed.getDay();
var ageTotal = year + " Years," + month + " Months," + day + " Days";
document.getElementById('agecal').innerText = ageTotal;
}
});
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div class="form-group">
<label for="datepicker">Date of Birth: <span style="color:red">*</span></label>
<input type="text" id="datepicker" name="date_of_birth" class="form-control" placeholder="Insert your Date of Birth...">
</div>
<div class="form-group" style="margin-top:10px;">
<label for="agecal">Age as On(<?php echo date('d/m/Y'); ?>): <span id="agecal" style="background-color:#60ab59;padding: 3px 15px 3px 15px;color: white;font-weight: bold; border-radius: 5px;" >0 Years,0 Months,0 Days</span></label>
</div>
&#13;