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 でサンプルを編集する-
Written by @cvializ