Age calculator

Create a responsive Age Calculator component that calculates a user’s age in years, months, and days based on a selected or entered birthdate.

Requirements

• A label "Enter/Select a birthdate:" indicating the user to either input manually or select a date from the datepicker.
• The interface must include:
  • An input field with the placeholder of the format (dd-mm-yyyy or mm-dd-yyyy)
  • The input should use the browser's built-in datepicker to allow users to manually select day, month, and year.
  • A button "Calculate Age"
• A display area below the button which will show the results or the errors
• Behavior on clicking the Calculate Age button:
  • If valid:
    • Display the result in the format:
      "X years, Y months, Z days "
  • If invalid:
    • Display an error message:
      • For future dates- "Birthdate cannot be in the future"
      • For empty input- "Please select a date"

Edge Cases & Constraints

• Input must be a valid past date
• Empty or future dates must show a user-friendly error
• The datepicker must open when clicked
• Age should be calculated using precise difference in years, months, and days
• The calculation must be accurate even across leap years
• Result must update immediately upon clicking "Calculate"

Testing Requirements

Data Test IDs (Required for Testing):

• data-testid="input-birthdate" — Date input field
• data-testid="btn-calculate" — Calculate age button
• data-testid="age-result" — Display area for result
• data-testid="error-msg" — Display area for errors
• data-testid="label-birthdate" -Label associated with the birthdate input

Reference UI