amp-date-countdown

Introduction

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.

Setup

Include the amp-date-countdown component ...

<script async custom-element="amp-date-countdown" src="https://cdn.ampproject.org/v0/amp-date-countdown-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 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="https://en.wikipedia.org/wiki/Year_2038_problem">Y2K38</a>.
  </template>
</amp-date-countdown>

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="https://en.wikipedia.org/wiki/Year_2038_problem">Y2K38</a>.
  </template>
</amp-date-countdown>

Locale

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}}
  </template>
</amp-date-countdown>

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="https://en.wikipedia.org/wiki/Year_2038_problem">Y2K38</a>.
  </template>
</amp-date-countdown>

Perlu penjelasan lebih lanjut?

Jika penjelasan pada halaman ini tidak menjawab semua pertanyaan Anda, silakan hubungi pengguna AMP lainnya untuk mendiskusikan contoh penggunaan Anda yang spesifik.

Kunjungi Stack Overflow

Fitur yang tidak dijelaskan?

Proyek AMP sangat menganjurkan partisipasi dan kontribusi Anda! Kami berharap Anda akan terus ambil bagian dalam komunitas sumber terbuka kami, tetapi kami juga menerima kontribusi satu kali untuk topik tertentu yang Anda minati.

Edit sampel di GitHub

Written by @fstanis