Do you build things with AMP? Fill out the new AMP Developer Survey!
AMP
JA
English Deutsch Français العربية Español Italiano Indonesia 한국어 Português Русский Türkçe 中文
  • websites

amp-date-display

デモを表示する Playground で開く

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.

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