如何使用js（使用js ui datepicker）将年龄计算为年、月、日？

Question

我是 JS 的初学者。我可以用下面的代码计算年龄。这个代码非常适合计算年数。如果我把日期放在 12 之后 （例如. 14/12/1950) 任何一个月，然后显示 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>

Answer 1

好的，我已经找到了问题所在。首先，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>

Answer 2

我对您的代码做了一个小小的改动，并且能够通过以下方式获得差异：

链接：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 函数中将其转换为与其余代码兼容的形式。

希望这会有所帮助。