Component

ba-date

Renders the inputted date in the correct format for the current locale

Airframe

Active

Figma

Web Components

Active

Storybook

Github

React

Planned

React Native

Planned

Live Demo


<ba-date date="2020-01-01"></ba-date>

Guidelines

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.

Accessibility

Code

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`

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

A simple example that renders the 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 closet lang attribute. If the locale is set to en it defaults to en-gb.

A example showing setting a different locale

<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>