React Js Calculate Age by Date of Birth | Age Calculator

To calculate the age of a user based on their date of birth using React. In this article, we will show you how to create an age calculator in React JS, utilizing basic concepts such as input fields, event handlers, state variables, and conditional rendering. Additionally, we will use JavaScript to perform date of birth validation and the age calculation logic. By the end of this article, you will have a functional age calculator app that can display the user's age in different units, such as years, months, days, etc

written

reviewed

updated

How to Find Age from Date of Birth in React Js?

React JS Calculate Age By Date Of Birth | Age Calculator: The ReactJS Age Calculator determines a person's age based on their date of birth. By subtracting the birthdate from the current date, the application calculates the exact age in years. This helps users quickly determine their age, making the Age Calculator a useful tool for age determination

Age Calculator in React Js

 <script type="text/babel" data-type="module">
      const { useState } = React;

      const App = () => {
        const [birthDate, setBirthDate] = useState("");
        const [years, setYears] = useState(null);
        const [months, setMonths] = useState(null);
        const [days, setDays] = useState(null);

        const calculateAge = (birthDate) => {
          if (!birthDate) return;

          const currentDate = new Date();
          if (new Date(birthDate) > currentDate) {
            setBirthDate("");
            setYears(null);
            setMonths(null);
            setDays(null);
            alert("Invalid Date of Birth");
            return;
          }

          const diffTime = currentDate - new Date(birthDate);
          const totalDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
          setYears(Math.floor(totalDays / 365.25));
          setMonths(Math.floor((totalDays % 365.25) / 30.4375));
          setDays(Math.floor((totalDays % 365.25) % 30.4375));
        };

        return (
          <div className="container">
            <h3>Reactjs Calculate age from given date</h3>
            <form>
              <label>Enter your birthdate:</label>
              <input
                type="date"
                value={birthDate}
                onChange={(e) => {
                  setBirthDate(e.target.value);
                  calculateAge(e.target.value);
                }}
              />
            </form>
            {birthDate && (
              <p>
                Your age is {years} years, {months} months, and {days} days
              </p>
            )}
          </div>
        );
      };

      ReactDOM.render(<App />, document.getElementById("app"));
    </script>

Run

Output of React Calculate Age from Date of Birth

How to Javascript Calculate Age in Years Months Days?

Calculating age from the date of birth is a common task in many applications that involve working with dates and time. JavaScript offers some built-in methods to manipulate and compare date objects, which can be used to find the difference between two dates and convert it into years, months, and days. In this article, we will show you how to calculate age from the date of birth in JavaScript using different approaches and techniques

Calculate Age from Date of Birth in Javascript

<body>
    <h2>Javascript Calculate date of birth (age) and Validation</h2>

    <label for="dob">Enter Date of Birth:</label>
    <input type="date" id="dob" required>

    <button onclick="calculateAge()">Calculate Age</button>

    <p id="result"></p>

    <script>
        function calculateAge() {
            const dobInput = document.getElementById('dob');
            const resultElement = document.getElementById('result');

            const today = new Date();
            const birthDate = new Date(dobInput.value);

            if (birthDate > today) {
                resultElement.textContent = "Invalid date of birth. Please enter a valid date.";
                return;
            }

            let ageInMilliseconds = today - birthDate;

            // Calculate years
            const years = Math.floor(ageInMilliseconds / (365.25 * 24 * 60 * 60 * 1000));

            // Calculate months
            const months = Math.floor((ageInMilliseconds % (365.25 * 24 * 60 * 60 * 1000)) / (30.44 * 24 * 60 * 60 * 1000));

            // Calculate days
            const days = Math.floor((ageInMilliseconds % (30.44 * 24 * 60 * 60 * 1000)) / (24 * 60 * 60 * 1000));

            resultElement.textContent = `Age: ${years} years, ${months} months, ${days} days`;
        }
    </script>

</body>

Run

Output of Javascript Calculate Age from Date of Birth

Pasted Image

Releated Tutorials

👉Vue Js Calculate Age from Date of Birth | Age Calculator

React JS Tutorial