skip to Main Content

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

2

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.');
                   }
               });
           });
      
    Login or Signup to reply.
  1. 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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search