Calculate age in jquery display in days months year-CodePudding

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

CodePudding user response：

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

    <!DOCTYPE html>
<html>
<head>
    <title>Age Calculator</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>

<script type="text/javascript">
    $(function () {
        $("#XIStudentDOB").datepicker({
            onSelect: function (value, ui) {
                var toDate = new Date(2024, 4, 1);
                var fromDate = new Date(value);
                var timeDiff = Math.abs(toDate.getTime() - fromDate.getTime());
                var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));

                var year = Math.floor(diffDays / 365);
                var remainderYear = diffDays % 365;
                var month = Math.floor(remainderYear / 30);
                var day = remainderYear % 30;

                $("#XIStudentDOB").val(value);
                $("#yr").val(year);
                $("#month").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
        });
    });
</script>

<input type="text" name="XIStudentDOB" id="XIStudentDOB"  />
<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

</body>
</html>

Here is an image example

CodePudding user response：

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.');
             }
         });
     });