Skip to main content

Time

The time component represents a specific date, time, or duration. Use time to display delivery estimates, order dates, or scheduling information with both a human-readable format and a machine-readable value.

The text between the tags controls the visible display format. For general text content, use text.

Support
Targets (24)

Supported targets

Anchor to Use casesUse cases

  • Order timestamps: Display the date and time an order was placed with machine-readable markup.
  • Delivery estimates: Present estimated arrival dates alongside human-friendly labels.
  • Pickup windows: Format same-day or scheduled pickup times for quick scanning.

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 time element displaying October 15, 2026 with a machine-readable datetime attribute.

html

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

Anchor to Show a timestampShow a timestamp

Display a time-of-day value with an ISO 8601 timestamp for machine readability. This example shows a "last updated" indicator with both a human-friendly label and a full datetime value.

html

<s-text>Last updated: </s-text><s-time dateTime="2026-10-15T14:30:00Z">Today, 2:30 PM</s-time>

Anchor to Display a date alongside textDisplay a date alongside text

Combine a short label with the date customers 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 property so assistive technology and search engines can parse the value.
  • Use human-friendly display text: Write the visible text in a format customers 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 customers don't have to interpret multiple styles.
Was this page helpful?