amp-date-display
說明
amp-date-display 元件會顯示時間資料，您可以在 AMP 網頁中呈現這些資料。
必要指令碼
<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 範本中指定的格式
| 格式 | 意義 |
|---|---|
| day | 1, 2, ...12, 13, 等等。 |
| dayName | 字串， |
| dayNameShort | 字串， |
| dayPeriod | 字串， |
| dayTwoDigit | 01, 02, 03, ..., 12, 13, 等等。 |
| hour | 0, 1, 2, 3, ..., 12, 13, ..., 22, 23 |
| hour12 | 1, 2, 3, ..., 12, 1, 2, ..., 11, 12 |
| hour12TwoDigit | 01, 02, ..., 12, 01, 02, ..., 11, 12 |
| hourTwoDigit | 00, 01, 02, ..., 12, 13, ..., 22, 23 |
| iso | 標準 ISO8601 日期字串，例如 2019-01-23T15:31:21.213Z， |
| localeString | 具有語言敏感表示法的字串。 |
| minute | 0, 1, 2, ..., 58, 59 |
| minuteTwoDigit | 00, 01, 02, ..., 58, 59 |
| month | 1, 2, 3, ..., 12 |
| monthName | 國際化的月份名稱字串。 |
| monthNameShort | 國際化的縮寫月份名稱字串， |
| monthTwoDigit | 01, 02, ..., 11, 12 |
| second | 0, 1, 2, ..., 58, 59 |
| secondTwoDigit | 00, 01, 02, ..., 58, 59 |
| timeZoneName | 國際化的時區，例如 Pacific Daylight Time |
| timeZoneNameShort | 國際化的時區，縮寫，例如 PST |
| year | 0, 1, 2, ..., 1999, 2000, 2001, 等等。 |
| yearTwoDigit | 00, 01, 02, ..., 17, 18, 19, ..., 98, 99 |
屬性
您必須至少指定下列其中一個必要屬性：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 規則。
您已閱讀此文件十幾次，但它仍然沒有涵蓋您所有的問題嗎？也許其他人也有相同的感受：請在 Stack Overflow 上與他們聯絡。
前往 Stack Overflow 發現錯誤或缺少功能嗎？AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎針對您特別感興趣的問題提供一次性的貢獻。
前往 GitHub