# PatientCard.BirthDate

Canonical page: https://docs.ovok.com/native-sdk/guide/components/patient/patient-birth-date

A compound component for displaying patient birth date and age information with calendar icon support. Provides flexible date formatting and age calculation for healthcare applications.

## Basic Example [#basic-example]

```typescript
import { PatientCard } from "@ovok/native";
import * as React from "react";

const birthDate = "1990-01-01";

const BasicAgeDisplay = () => (
  <PatientCard.BirthDate>
    <PatientCard.BirthDate.Icon />
    <PatientCard.BirthDate.Text birthDate={birthDate} variant="both" />
  </PatientCard.BirthDate>
);

export default BasicAgeDisplay;

```

## Props [#props]

Every prop, with its type and description, is listed in the [`@ovok/native/patient` API reference](/native-sdk/reference/patient).

## Compound Components [#compound-components]

- [**`PatientCard.BirthDate.Icon`**](/native-sdk/guide/components/patient/patient-birth-date/icon/) - Calendar icon component
- [**`PatientCard.BirthDate.Text`**](/native-sdk/guide/components/patient/patient-birth-date/text/) - Date and age text display component

## Localization [#localization]

The component uses these translation keys:

```typescript
{
  "patient-card": {
    "age-years": "{{age}} years old",
    "birth-date-with-age": "{{date}} ({{age}} years old)"
  }
}
```

## Styling [#styling]

### Theme Colors Used [#theme-colors-used]

- `theme.colors.onSurfaceVariant` - Icon and text color
- `theme.spacing(1)` - Gap between icon and text
- `theme.fonts.bodyMedium` - Text typography

### Date Calculation [#date-calculation]

- Uses `date-fns` for reliable age calculation
- Handles timezone differences appropriately
- Supports various date format patterns
- Provides localized age display with translations