• websites



amp-date-countdown component allows to create a dynamic timer that counts down to the given date and time which you can render in your AMP page.


Include the amp-date-countdown component ...

<script async custom-element="amp-date-countdown" src=""></script>

... and the amp-mustache component in the header

<script async custom-template="amp-mustache" src=""></script>

Basic usage

You must specify one of timestamp-seconds, timestamp-ms or end-date attributes. This indicates the date and time to count down to.

The countdown content is rendered via an amp-mustache template.

The number of days, hours, minutes and seconds remaining is bound to {{d}}, {{h}}, {{m}} and {{s}} respectively. Double digit format variants ({{dd}}, {{hh}}, {{mm}} and {{ss}}) are also available.

<amp-date-countdown timestamp-seconds="2147483648" layout="fixed-height" height="100">
  <template type="amp-mustache">
      {{d}} days, {{h}} hours, {{m}} minutes and {{s}} seconds until <a href="">Y2K38</a>.

End date

When using end-date, specify the date in the ISO 8601 format.

You can optionally specify offset-seconds to offset the provided date.

<amp-date-countdown end-date="2038-01-19T03:14:08.000Z" offset-seconds="-10" layout="fixed-height" height="100">
  <template type="amp-mustache">
      {{d}} days, {{h}} hours, {{m}} minutes and {{s}} seconds until 10 before <a href="">Y2K38</a>.


If locale is specified, {{days}}, {{hours}}, {{minutes}} and {{seconds}} are bound to the word(s) used to represent the given unit of time in the specified locale.

<amp-date-countdown timestamp-seconds="2147483648" locale="ru" layout="fixed-height" height="100">
  <template type="amp-mustache">
      {{d}} {{days}}, {{h}} {{hours}}, {{m}} {{minutes}}, {{s}} {{seconds}}

Biggest unit

The biggest-unit attribute specifies the biggest unit used inside the template. For example, when biggest-unit="minutes" is set, "2 days, 3 hours, 4 minutes, 5 seconds" becomes "0 days, 0 hours, 3064 minutes, 5 seconds", as 2 days and 3 hours are added to minutes.

<amp-date-countdown timestamp-seconds="2147483648" biggest-unit="minutes" layout="fixed-height" height="100">
  <template type="amp-mustache">
      {{m}} minutes and {{s}} seconds until <a href="">Y2K38</a>.

このページの説明でご質問のすべてを解消できない場合は、あなたの実際の使用事例について他の AMP ユーザーに問い合わせて話し合ってください。

Stack Overflow にアクセスする

AMP プロジェクトでは皆さんの参加と貢献を強くお勧めしています!当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。

GitHub でサンプルを編集する