Skip to main content

Time

The time component represents a specific datetime or time duration.

Use s-time to wrap dates, times, or durations. The text between the opening and closing tags controls the display format. Add a machine-readable dateTime attribute so parsers and assistive technology can read the exact value.

Support
Targets (29)

Supported targets

Anchor to PropertiesProperties

Configure the following properties on the time component.

Anchor to dateTime
dateTime
string
Default: ''

The machine-readable date and/or time value for the element. Use this to provide a datetime string that browsers, search engines, and assistive technologies can parse for improved semantics and functionality.

The value must be a valid datetime string, such as 2024-01-15, 14:30, or 2024-01-15T14:30:00.

Anchor to id
id
string

A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.

Anchor to ExamplesExamples

Anchor to Show a date with a machine-readable labelShow a date with a machine-readable label

Format a date for display with human-friendly text and machine-readable markup. This example renders an s-time element with a dateTime attribute for accessibility and a formatted date string.

Show a date with a machine-readable label

A rendered example of the time component

html

<s-time dateTime="2026-10-15">October 15, 2026</s-time>

Anchor to Display a date alongside textDisplay a date alongside text

Combine a short label with the date buyers care about most. This example uses s-time with dateTime for a parseable delivery estimate and readable surface text.

html

<s-text>Estimated delivery: </s-text><s-time dateTime="2026-10-20">Wednesday, October 20</s-time>

Anchor to Best practicesBest practices

  • Always set dateTime: Provide a valid ISO 8601 dateTime attribute so assistive technology and search engines can parse the value.
  • Use human-friendly display text: Write the visible text in a format buyers expect, such as "October 15, 2026" or "Today, 2:00 PM."
  • Include timezone context: When the time is relative to a location, mention the timezone or use UTC to avoid ambiguity.
  • Keep formatting consistent: Use the same date and time format across your extension so buyers don't have to interpret multiple styles.
Was this page helpful?