ba-date
Renders the inputted date in the correct format for the current locale
Airframe
Web Components
React
React Native
Anatomy
Date text
The formatted date value rendered in the correct locale-aware format, displayed inline within the surrounding text content
Design Documentation
ba-date is designed to be used within a text tag such as a h1, h2, h3, h4, h5, h6 or p that is nested within ba-content. This allows ba-date to use the correct styling and fonts.
Live Demo
<ba-date date="2020-01-01"></ba-date>
Properties and attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
date(required) |
date |
An ISO date string | string |
undefined |
locale |
locale |
The locale to use for formatting the date | string | undefined |
undefined |
Permitted ARIA roles
- None
Slots
No slotted content available for this component.
Parent components
ba-date can be slotted into:
<h1><h2><h3><h4><h5><h6><p>
Usage
Basic usage
Rendering a date
<ba-content>
<p>
<ba-date date="2024-11-12"></ba-date>
</p>
</ba-content>Internationalisation
The component picks up on the set locale of the page, or the closest lang attribute. If the locale is set to en it defaults to en-gb.
<html lang="en">
<ba-page-segment>
<ba-content>
<p>
<ba-date lang="fr" date="2024-11-12"></ba-date> <!-- Will render in french from lang tag on component -->
</p>
</ba-content>
</ba-page-segment>
<ba-page-segment lang="es">
<ba-content>
<p>
<ba-date date="2024-11-12"></ba-date> <!-- Will render in spanish from lang tag on page-segment -->
</p>
</ba-content>
</ba-page-segment>
<ba-page-segment>
<ba-content>
<p>
<ba-date date="2024-11-12"></ba-date> <!-- Will render in english from lang tag on html tag -->
</p>
</ba-content>
</ba-page-segment>
</html>Guidelines
ba-date formats the date based on the locale determined by the nearest lang attribute in the DOM. When the locale is set to en it defaults to en-gb.
Screen readers announce dates according to the locale, so setting the correct lang attribute on the page, a wrapping element, or the component itself ensures the date is read in the intended language.
Further reading:
Keyboard navigation
State: ba-date is a display-only component
Focus passes through ba-date to the next tabbable element; ba-date itself is not focusable
Usage and accessibility checklist
Use this checklist to confirm the component has been configured and used correctly.
UX checklist
- ba-date is nested within a text tag (h1–h6 or p) inside ba-content so that it inherits the correct styling and fonts
- The date attribute is a valid ISO 8601 date string (e.g. 2024-11-12)
Accessibility checklist
- The rendered date is meaningful in context and does not rely on visual formatting alone to convey information
- The correct lang attribute is set on the page or nearest ancestor so the date is read aloud in the intended language by screen readers
These checks are handled by the component and do not need to be repeated each time it is used.
- Date is formatted correctly for the active locale
- Falls back to en-gb when the lang attribute is set to en
- Picks up the lang attribute from the nearest ancestor when no lang is set directly on the component
- Colour contrast meets requirements in all BAgel themes
- High contrast mode adjustments