Calculate age in jquery display in days months year

user22761517
October 31, 2023
84 views
0 votes
2 Answers

I want to calculate in age of the person in days,months,year as of date May 2024. When the user selects the date of birth from the date picker days, months and year of the person has to be displayed in particular text boxes.
Year and month calculation works fine but days calculation is not working properly
Here is the code

            <script type="text/javascript">
    $(function () {
                $("#XIStudentDOB").datepicker({
            onSelect: function (value, ui) {
                    var toDate = new Date(2024, 05, 01);
                var fromDate = new Date(value);
                var days = (toDate - fromDate) / 1000 / 60 / 60 / 24;
                var y = 365;
                var y2 = 31;
                var remainder = days % y;
                var casio = remainder % y2;
                year = (days - remainder) / y;
                month = (remainder - casio) / y2;
                     day = (toDate - fromDate)  / y;
                   var displayMonth = fromDate.getMonth()+1;
                    var DateString = fromDate.getDate() + "/" + displayMonth + '/' +                    fromDate.getFullYear();
        $("#XIStudentDOB").val(DateString);
                    $("#age").val(year);
                $("#months").val(month);
                     $("#days").val(day);
            },
            dateFormat: 'yy,mm,dd',
            defaultDate: '2000,01,01',
            maxDate: new Date((new Date).getFullYear(), 11, 31),
            yearRange: '2000:2016',
            changeMonth: true,
            changeYear: true
        }); 
         });

       <input type="text" name="XIStudentDOB" id="XIStudentDOB" class="form-control" />
        <input type="text" name="yr" id="yr" maxlength="2" required=""  />Year
         <input type="text" name="month" id="month" maxlength="2"  required=""  />Months
         <input type="text" name="days" id="days"  maxlength="2"  required=""  />Days

How to calculate the days in from the date of birth using jquery

Tags: javascript jquery

Answers

Create an HTML form with an input field for entering the date of
birth.
Use jQuery to capture the input date when the user submits the
form.
Calculate the difference between the current date and the
entered date of birth.

Display the calculated number of days.

$(document).ready(function() {
$(‘#dateForm’).submit(function(e) {
e.preventDefault();

             // Get the date of birth value from the input field
             var dob = new Date($('#dob').val());

             // Check if a valid date was entered
             if (!isNaN(dob.getTime())) {
                 // Calculate the difference in milliseconds
                 var today = new Date();
                 var difference = today - dob;

                 // Convert milliseconds to days
                 var days = Math.floor(difference / (1000 * 60 * 60 * 24));

                 // Display the result
                 $('#result').text('You have lived for ' + days + ' days.');
             } else {
                 $('#result').text('Please enter a valid date of birth.');
             }
         });
     });

Certainly! Here is a complete and corrected working code snippet for you

    <!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
</head>
<body>
    <input type="text" name="XIStudentDOB" id="XIStudentDOB" class="form-control" />
    <input type="text" name="yr" id="yr" maxlength="2" required="" /> Year
    <input type="text" name="month" id="month" maxlength="2" required="" /> Months
    <input type="text" name="days" id="days" maxlength="2" required="" /> Days
    <script type="text/javascript">
        $(function () {
            $("#XIStudentDOB").datepicker({
                onSelect: function (value, ui) {
                    var ageString = getAge(value);
                    $("#yr").val(ageString.years);
                    $("#month").val(ageString.months);
                    $("#days").val(ageString.days);
                },
                dateFormat: "dd/mm/yy",
                defaultDate: "01/01/2000",
                changeMonth: true,
                changeYear: true,
                yearRange: "1960:2060"
            });
        });

        function getAge(dateString) {
            var now = new Date();
            var chosenDate = new Date(
                dateString.substring(6, 10),
                dateString.substring(3, 5) - 1,
                dateString.substring(0, 2)
            );

            var diff = chosenDate.getTime() - now.getTime();
            var ageDate = new Date(Math.abs(diff));

            var yearAge = ageDate.getUTCFullYear() - 1970;
            var monthAge = ageDate.getUTCMonth();
            var dateAge = ageDate.getUTCDate() - 1;

            if (diff < 0) {
                yearAge = -yearAge;
                monthAge = -monthAge;
                dateAge = -dateAge;
            }

            return {
                years: yearAge,
                months: monthAge,
                days: dateAge,
            };
        }
    </script>
</body>
</html>

Here is an image example

Please signup or login to give your own answer.

Click here to cancel reply.