Vue.js Age Calculation: Finding Age from Date of Birth – 
 Vue.js is a 
 JavaScript framework
 framework used for building user interfaces. With Vue.js, you can easily calculate the date from a given date of birth. This can be done by utilizing the JavaScript Date object and its methods, such as setDate() and getDate(), to manipulate and retrieve the date information. By combining these methods with Vue’s reactive data and computed properties, you can create a dynamic and effective Age calculation solution for your web application.In this tutorial we will learn how to calculate Age from given Date of Birth.

How do you calculate age in Vue.js using a given date of birth?

This code is written in  Vue.js and calculates the age of a person based on their birthdate.

The code defines a  Vue component with an ID of “app”. This component contains a form that takes in a birthdate as input and a paragraph that displays the calculated age in years, months, and days.

The component has a data object that holds the birthdate, years, months, and days. The component also has a method, “calculateAge”, that calculates the age based on the input birthdate.

The birthdate is passed as an argument to the “calculateAge” method and is used to calculate the difference between the current date and the birthdate. If the input birthdate is greater than the current date, an alert message is displayed, and the birthdate, years, months, and days are reset to null.

The “calculateAge” method calculates the total number of days between the birthdate and the current date by dividing the difference in milliseconds by the number of milliseconds in a day. The number of years, months, and days is calculated by dividing the total number of days by the average number of days in a year, month, and day, respectively.

Finally, the component is mounted to the HTML element with an ID of “app”.

If the current date is before the birth date, the Age property always returns -1.

 Vue Js Calculate Age | Example

<div id="app">
        <form>
            <label>Enter your birthdate:</label>
            <input type="date" v-model="birthDate" @input="calculateAge(birthDate)">
        </form>
        <p v-if="birthDate">Your age is {{ years }} years, {{ months }} months, and {{ days }} days</p>
</div>
  <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    birthDate: '',
                    years: null,
                    months: null,
                    days: null

                };
            },
          methods: {
              calculateAge(birthDate) {
                    if (!birthDate) return;

                    const currentDate = new Date();
                    if (new Date(birthDate) > currentDate) {
                        this.birthDate = null
                        this.years = null;
                        this.months = null;
                        this.days = null;
                        alert('Invalid Date of Birth')
                    }

                    const diffTime = currentDate - new Date(birthDate);
                    const totalDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
                    this.years = Math.floor(totalDays / 365.25);
                    this.months = Math.floor((totalDays % 365.25) / 30.4375);
                    this.days = Math.floor((totalDays % 365.25) % 30.4375);

                }
            }
        })
 </script>

Output of above example