amp-date-display

簡介

amp-date-display 元件以各種日期格式和不同的地區設定呈現日期資訊。

設定

包含 amp-date-display 元件 ...

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

... 以及標頭中的 amp-mustache 元件

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

基本用法

您必須指定 datetime、timestamp-ms 或 timestamp-seconds 屬性之一。這表示要顯示的日期和時間。

日期資訊透過 amp-mustache 範本呈現。

日、時、分和秒值分別繫結至 {{day}}、{{hour}}、{{minute}} 和 {{second}}。

兩位數格式變體 ({{dayTwoDigit}}、{{hourTwoDigit}}、{{minuteTwoDigit}} 和 {{secondTwoDigit}}) 會以零填充顯示這些單一位數值。其他值 (例如 {{iso}}) 也可使用

<amp-date-display timestamp-seconds="2147483648" layout="fixed-height" height="20">
  <template type="amp-mustache">
      <a href="https://en.wikipedia.org/wiki/Year_2038_problem">Y2K38</a> will be at {{iso}}
  </template>
</amp-date-display>

可用變數

所有可以顯示的變數都在下方的範本中。

變數	值
day (日)	{{day}}
dayName (星期名稱)	{{dayName}}
dayNameShort (星期名稱縮寫)	{{dayNameShort}}
dayPeriod (上午/下午)	{{dayPeriod}}
dayTwoDigit (兩位數日)	{{dayTwoDigit}}
hour (時)	{{hour}}
hour12 (12 小時制時)	{{hour12}}
hour12TwoDigit (兩位數 12 小時制時)	{{hour12TwoDigit}}
hourTwoDigit (兩位數時)	{{hourTwoDigit}}
iso	{{iso}}
minute (分)	{{minute}}
minuteTwoDigit (兩位數分)	{{minuteTwoDigit}}
month (月)	{{month}}
monthName (月份名稱)	{{monthName}}
monthNameShort (月份名稱縮寫)	{{monthNameShort}}
monthTwoDigit (兩位數月)	{{monthTwoDigit}}
second (秒)	{{second}}
secondTwoDigit (兩位數秒)	{{secondTwoDigit}}
year (年)	{{year}}
yearTwoDigit (兩位數年)	{{yearTwoDigit}}

<amp-date-display datetime="now" layout="fixed" width="360" height="590">
  <template type="amp-mustache">
    <table>
      <thead>
        <tr><th>variable</th><th>value</th></tr>
      </thead>
      <tbody>
        <tr><td>day</td><td>{{day}}</td></tr>
        <tr><td>dayName</td><td>{{dayName}}</td></tr>
        <tr><td>dayNameShort</td><td>{{dayNameShort}}</td></tr>
        <tr><td>dayPeriod</td><td>{{dayPeriod}}</td></tr>
        <tr><td>dayTwoDigit</td><td>{{dayTwoDigit}}</td></tr>
        <tr><td>hour</td><td>{{hour}}</td></tr>
        <tr><td>hour12</td><td>{{hour12}}</td></tr>
        <tr><td>hour12TwoDigit</td><td>{{hour12TwoDigit}}</td></tr>
        <tr><td>hourTwoDigit</td><td>{{hourTwoDigit}}</td></tr>
        <tr><td>iso</td><td>{{iso}}</td></tr>
        <tr><td>minute</td><td>{{minute}}</td></tr>
        <tr><td>minuteTwoDigit</td><td>{{minuteTwoDigit}}</td></tr>
        <tr><td>month</td><td>{{month}}</td></tr>
        <tr><td>monthName</td><td>{{monthName}}</td></tr>
        <tr><td>monthNameShort</td><td>{{monthNameShort}}</td></tr>
        <tr><td>monthTwoDigit</td><td>{{monthTwoDigit}}</td></tr>
        <tr><td>second</td><td>{{second}}</td></tr>
        <tr><td>secondTwoDigit</td><td>{{secondTwoDigit}}</td></tr>
        <tr><td>year</td><td>{{year}}</td></tr>
        <tr><td>yearTwoDigit</td><td>{{yearTwoDigit}}</td></tr>
      </tbody>
    </table>
  </template>
</amp-date-display>

地區設定

國際化的月份和星期名稱可以透過指定 locale 屬性來設定。

例如，下方的 amp-date-display 元件以德文、法文、捷克文和英文顯示相同的日期資訊。

<amp-date-display datetime="now" locale="de" layout="fixed" width="360" height="20">
  <template type="amp-mustache">
    <div>de: {{dayName}} {{day}} {{monthName}} {{year}}</div>
  </template>
</amp-date-display>
<amp-date-display datetime="now" locale="fr" layout="fixed" width="360" height="20">
  <template type="amp-mustache">
    <div>fr: {{dayName}} {{day}} {{monthName}} {{year}}</div>
  </template>
</amp-date-display>
<amp-date-display datetime="now" locale="cs" layout="fixed" width="360" height="20">
  <template type="amp-mustache">
    <div>cs: {{dayName}} {{day}} {{monthName}} {{year}}</div>
  </template>
</amp-date-display>
<amp-date-display datetime="now" locale="en-GB" layout="fixed" width="360" height="20">
  <template type="amp-mustache">
    <div>en-GB: {{dayName}} {{day}} {{monthName}} {{year}}</div>
  </template>
</amp-date-display>

需要進一步說明嗎？

如果此頁面上的說明未能涵蓋您的所有問題，請隨時與其他 AMP 使用者聯絡，討論您的確切使用案例。

前往 Stack Overflow

未說明的特色功能？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能持續參與我們的開放原始碼社群，但我們也歡迎針對您特別關注的問題提供一次性的貢獻。

在 GitHub 上編輯範例

作者： @cvializ