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}}
星期几名称	{{dayName}}
星期几名称缩写	{{dayNameShort}}
上午/下午	{{dayPeriod}}
两位数日	{{dayTwoDigit}}
小时	{{hour}}
12 小时制小时	{{hour12}}
12 小时制两位数小时	{{hour12TwoDigit}}
两位数小时	{{hourTwoDigit}}
ISO	{{iso}}
分钟	{{minute}}
两位数分钟	{{minuteTwoDigit}}
月份	{{month}}
月份名称	{{monthName}}
月份名称缩写	{{monthNameShort}}
两位数月份	{{monthTwoDigit}}
秒	{{second}}
两位数秒	{{secondTwoDigit}}
年份	{{year}}
两位数年份	{{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