---
title: Time
description: >-
  Represents a specific point or duration in time. Use to display dates, times,
  or durations clearly and consistently. May include a machine-readable
  `datetime` attribute for improved accessibility and functionality.
api_version: 2026-01
api_name: customer-account-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2026-01/web-components/typography-and-content/time
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2026-01/web-components/typography-and-content/time.md
---

# Time

Represents a specific point or duration in time. Use to display dates, times, or durations clearly and consistently. May include a machine-readable `datetime` attribute for improved accessibility and functionality.

### Support Targets (24)

### Supported targets

* customer-account.​footer.​render-after
* customer-account.​order-index.​announcement.​render
* customer-account.​order-index.​block.​render
* customer-account.​order-status.​announcement.​render
* customer-account.​order-status.​block.​render
* customer-account.​order-status.​cart-line-item.​render-after
* customer-account.​order-status.​cart-line-list.​render-after
* customer-account.​order-status.​customer-information.​render-after
* customer-account.​order-status.​fulfillment-details.​render-after
* customer-account.​order-status.​payment-details.​render-after
* customer-account.​order-status.​return-details.​render-after
* customer-account.​order-status.​unfulfilled-items.​render-after
* customer-account.​order.​action.​menu-item.​render
* customer-account.​order.​action.​render
* customer-account.​order.​page.​render
* customer-account.​page.​render
* customer-account.​profile.​addresses.​render-after
* customer-account.​profile.​announcement.​render
* customer-account.​profile.​block.​render
* customer-account.​profile.​company-details.​render-after
* customer-account.​profile.​company-location-addresses.​render-after
* customer-account.​profile.​company-location-payment.​render-after
* customer-account.​profile.​company-location-staff.​render-after
* customer-account.​profile.​payment.​render-after

## Properties

* **dateTime**

  **string**

  **Default: ''**

  Set the time and/or date of the element.

  It must be a [valid date string](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/time#valid_datetime_values).

* **id**

  **string**

  A unique identifier for the element.

Examples

## Preview

![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-10/time-default-CszoQvku.png)

### Examples

* #### Code

  ##### Default

  ```html
  <s-time dateTime="2023-10-15">October 15, 2023</s-time>
  ```

## Best Practices

* Use the Time component for all time values to keep formatting consistent.
* Show times in a clear, readable format.
* Consider 24-hour format for international audiences.
* Include timezone information when relevant.
* Use the Time component for time-related content to maintain clear semantics.