amp-date-display
Introduction
The amp-date-display component renders date information in various date formats and in different locales.
Setup
Include the amp-date-display component ...
<script async custom-element="amp-date-display" src="https://cdn.ampproject.org/v0/amp-date-display-0.1.js"></script>
... and the amp-mustache component in the header
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
Basic usage
You must specify one of datetime, timestamp-ms, or timestamp-seconds attributes. This indicates the date and time to display.
The date information is rendered via an amp-mustache template.
The day, hour, minutes and seconds values are bound to {{day}}, {{hour}}, {{minute}} and {{second}} respectively.
Double digit format variants ({{dayTwoDigit}}, {{hourTwoDigit}}, {{minuteTwoDigit}} and {{secondTwoDigit}}) display these values with zero-padding on single digit values. Other values like {{iso}} are also available
<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>
Available variables
All the variables that can be displayed are in the template below.
| variable | value |
|---|---|
| day | {{day}} |
| dayName | {{dayName}} |
| dayNameShort | {{dayNameShort}} |
| dayPeriod | {{dayPeriod}} |
| dayTwoDigit | {{dayTwoDigit}} |
| hour | {{hour}} |
| hour12 | {{hour12}} |
| hour12TwoDigit | {{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>
Locales
Internationalized month and weekday names can be configured by specifying a locale attribute.
For example, the amp-date-display components below show the same date information in German, French, Czech and English.
<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 プロジェクトでは皆さんの参加と貢献を強くお勧めしています！当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。
GitHub でサンプルを編集する-
