如何用js计算年龄,年,月,日(使用js ui datepicker)?

时间:2016-12-20 06:46:16

标签: javascript jquery laravel jquery-ui

我是 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>

2 个答案:

答案 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()计算月数和天数。

&#13;
&#13;
$(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;
&#13;
&#13;