AMP

重要提示:此文档不适用于您当前选择的格式 ads

amp-date-display

 
现在,您可以使用此组件在有效的 AMP 文档之外使用 此组件的 Bento 版本。请在 Bento 指南中了解更多信息。

描述

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

属性

您必须指定以下至少一个必需属性:datetimetimestamp-mstimestamp-seconds

datetime

datetime 属性以标准的 ISO 8601 日期字符串(例如 2017-08-02T15:05:05.000Z)或字符串 now 指定日期和时间。如果设置为 nowamp-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-styledata-options-time-style 等。

请注意,如果 display-in 属性设置为 utc,则 data-options-time-zone 的值将自动转换为 UTC

验证

请参阅 AMP 验证器规范中的 amp-date-display 规则

需要更多帮助?

您已经阅读本文档十几次了,但它实际上并没有涵盖您的所有问题?也许其他人也有同样的感觉:请在 Stack Overflow 上与他们联系。

转到 Stack Overflow
发现错误或缺少功能?

AMP 项目强烈鼓励您的参与和贡献!我们希望您能成为我们开源社区的持续参与者,但我们也欢迎您为自己特别关注的问题提供一次性贡献。

转到 GitHub