amp-date-display

1.0 0.1

<script async custom-element="amp-date-display" src="https://cdn.ampproject.org/v0/amp-date-display-0.1.js"></script>

用法

amp-date-display 元件會顯示時間資料，您可以在 AMP 頁面中呈現這些資料。透過在 amp-date-display 標記中提供特定的屬性，amp-date-display 擴充功能會傳回時間參數清單，您可以將這些參數傳遞至 amp-mustache 範本以進行呈現。請參閱下方的清單，瞭解每個傳回的時間參數。

<!-- Displays "Wednesday 2 August 2017, 15:05:05" -->
<amp-date-display
  datetime="2017-08-02T15:05:05.000"
  layout="fixed"
  width="360"
  height="20"
>
  <template type="amp-mustache">
    <div>
{{dayName}} {{day}} {{monthName}} {{year}}{{hourTwoDigit}}:{{minuteTwoDigit}}:{{secondTwoDigit}}    </div>
  </template>
</amp-date-display>

傳回的時間參數

下表列出您可以在 Mustache 範本中指定的格式

屬性

您必須至少指定下列必要屬性之一：datetime、timestamp-ms 或 timestamp-seconds。

datetime

datetime 屬性以標準 ISO 8601 日期字串 (例如 2017-08-02T15:05:05.000Z) 或字串 now 指定日期和時間。如果設定為 now，amp-date-display 將使用頁面載入時的時間來呈現其範本。

timestamp-ms

timestamp-ms 屬性使用自 1970-01-01T0:00:00.000Z 以來的毫秒數指定日期和時間

timestamp-seconds

timestamp-seconds 屬性使用自 1970-01-01T0:00:00.000Z 以來的秒數指定日期和時間

locale (選填)

每個計時器單位的國際化語言字串。預設值為 en (英文)。此屬性支援使用者瀏覽器支援的所有值。

display-in (選填)

如果設定為值 utc，display-in 屬性會將給定的日期轉換為 UTC。

offset-seconds (選填)

offset-seconds 屬性指定要偏移給定日期的整數秒數。

data-options-* (選填)

data-options-* 支援 Intl.DateTimeFormat.options 參數下的所有選項，這些選項指定用於 localeString 格式的格式化樣式。有效屬性包括：data-options-date-style、data-options-time-style 等。

請注意，如果 display-in 屬性設定為 utc，則 data-options-time-zone 的值將自動轉換為 UTC。

驗證

請參閱 AMP 驗證器規格中的 amp-date-display 規則。