如何计算年龄到年，月，日与js（使用js用户界面datepicker）？

Question

我是JS的初学者。我可以用下面的代码计算年龄。这段代码多年来一直运行良好。如果我把日期放在任何一个月的12（例如，1950年12月14日）之后，那么它显示的是年份。现在我想展示每个人生日的年、月、日。有人能帮我吗？提前谢谢。

$(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>

Answer 1

我对您的代码做了一点修改，并通过以下方式获得了差异：

链接：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的原因是JS中固有的日期格式是mm/dd/yy。更改datepicker配置以该格式发送日期会解决这个问题。或者，您必须在onSelect函数中对其进行转换，以使其与其他代码兼容。

希望这有帮助。

Answer 2

好的，我已经解决了这个问题。首先，由于两个日期格式不相同，NaN返回。现在我将它从dd/mm/yy转换为mm/dd/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;

            }
     });  

});

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