Component

DataTime

Published on

Description

The DataTime component formats date and time values using Intl.DateTimeFormat, rendering a <time> element with locale-aware formatting. It supports all DateTimeFormat options such as dateStyle and timeStyle.

Use DataTime for displaying publication dates, event times, or any temporal data. The default format uses dateStyle: 'long'.

Example

Open in new tab
View HTML markup 
  <p><time datetime="2025-01-15">January 15, 2025</time></p>
<p><time datetime="2025-06-30T14:30:00Z">Monday, June 30, 2025</time></p>
<p><time datetime="2025-12-25">Dec 25, 2025</time></p>

Accessibility

  • Renders as a <time> element with the machine-readable datetime preserved in the datetime attribute
  • Screen readers announce the human-readable formatted date
  • The semantic <time> element helps assistive technologies understand the content as temporal data

Variables

None