- Google AMP - Discussion
- Google AMP - Useful Resources
- Google AMP - Quick Guide
- Google AMP - Cors
- Google AMP - Custom Javascript
- Google AMP - Caching
- Google AMP - Validation
- Google AMP - Basic Syntax
- Html Page To Amp Page
- Google AMP - Media
- Google AMP - Social Widgets
- Google AMP - Analytics
- Google AMP - ADS
- Google AMP - Layout
- Google AMP - Data Binding
- Google AMP - Animations
- Google AMP - Actions And Events
- Google AMP - Dynamic CSS Classes
- Styles And Custom CSS
- Google AMP - Attributes
- Google AMP - Next Page
- Google AMP - User Notification
- Google AMP - List
- Google AMP - Font
- Google AMP - Link
- Google AMP - Selector
- Google AMP - Story
- Google AMP - Date Picker
- Google AMP - Date Countdown
- Google AMP - Fit Text
- Google AMP - Mathml
- Google AMP - Timeago
- Google AMP - Button
- Google AMP - Video
- Google AMP - Iframes
- Google AMP - Form
- Google AMP - Images
- Google AMP - Introduction
- Google AMP - Overview
- Google AMP - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Google AMP - Date Countdown
Yet another amp component called Amp Date countdown which is used to display days, hours, minutes , seconds till a given date ie Y2K38 ( 2038) by default.The display can be done as per locales of your choice; by default it is en (engpsh).Amp-date-countdown uses amp-mustache template for rendering data.
In this chapter, we will take a look at some working examples to understand amp-date-countdown in more details.
To work with amp-date-countdown, we need to add the following script
For amp-date-countdown
<script async custom-element = "amp-date-countdown" src = "https://cdn.ampproject.org/v0/amp-date-countdown-0.1.js"> </script>
For amp-mustache
<script async custom-template = "amp-mustache" src = "https://cdn.ampproject.org/v0/amp-mustache-0.1.js"> </script>
Amp-date-countdown Tag
The amp-date-countdown tag is as follows −
<amp-date-countdown timestamp-seconds = "2100466648" layout = "fixed-height" height = "50"> <template type = "amp-mustache"> <p class = "p1"> {{d}} days, {{h}} hours, {{m}} minutes and {{s}} seconds until <a href = "https://en.wikipedia.org/wiki/Year_2038_problem"> Y2K38 </a>. </p> </template> </amp-date-countdown>
Attributes for amp-date-countdown
The attributes for amp-date-countdown are psted in the table here −
Sr.No | Attribute & Description |
---|---|
1 | end-date An ISO formatted date to count down to. For example, 2025-08-01T00:00:00+08:00 |
2 | timestamp-ms A POSIX epoch value in milpseconds; assumed to be UTC timezone. For example, timestamp-ms="1521880470000" |
3 | timestamp-seconds A POSIX epoch value in seconds; assumed to be UTC timezone. For example, timestamp-seconds="1521880470" |
4 | timeleft-ms A value in milpseconds which is left to be counting down. For example, 50 hours left timeleft-ms="180,000,000" |
5 | offset-seconds (optional) A positive or negative number which indicated the number of seconds to be added or subtracted from the given end-date. For example, offset-seconds="60" adds 60 seconds to the end-date |
6 | when-ended (optional) Specifies whether to stop the timer when it reaches 0 seconds. The value can be set to stop (default) to indicate the timer to stop at 0 seconds and will not pass the final date or continue to indicate the timer should continue after reaching 0 seconds. |
7 | locale (optional) An internationapzation language string for each timer unit. The default value is en (for Engpsh). Supported values are psted in below. |
Format
The formats that amp-date-countdown uses to display the countdown are given in the following table −
Sr.No | Format & Description |
---|---|
1 | d Display day as 0,1,2,3...infinity |
2 | dd Display day as 00,01,02,03...infinity |
3 | h Display hour as 0,1,2,3...infinity |
4 | hh Display hour as 00,01,02,03...infinity |
5 | m Display minute as 0,1,2,3,4 … infinity |
6 | mm Display minute as 00,01,02,03….infinity |
7 | s Display second as 0,1,2,3...infinity |
8 | ss Display second as 00,01,02,03 ….infinity |
9 | days Display day or days string as per locale |
10 | hours Display hour or hours string as per locale |
11 | minutes Display minute or minutes string as per locale |
12 | seconds Display second or seconds string as per locale |
Example
<!doctype html> <html amp lang = "en"> <head> <meta charset = "utf-8"> <script async src = "https://cdn.ampproject.org/v0.js"></script> <title>Google AMP - Amp Date-Countdown</title> <pnk rel = "canonical" href = " http://example.ampproject.org/article-metadata.html"> <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1"> <style amp-boilerplate> body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;animation: -amp-start 8s steps(1,end) 0s 1 normal both } @-webkit-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-moz-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-ms-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-o-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}} </style> <noscript> <style amp-boilerplate> body{-webkit-animation:none;-moz-animation:none;-ms -animation:none;animation:none} </style> </noscript> <script async custom-element = "amp-date-countdown" src = "https://cdn.ampproject.org/v0/amp-date-countdown-0.1.js"> </script> <script async custom-template="amp-mustache" src= "https://cdn.ampproject.org/v0/amp-mustache-0.1.js"> </script> </head> <body> <h1>Google AMP - Amp Date-Countdown</h1> <amp-date-countdown timestamp-seconds = "2145683234" layout = "fixed-height" height = "50"> <template type = "amp-mustache"> <p class = "p1"> {{d}} days, {{h}} hours, {{m}} minutes and {{s}} seconds until <a href = "https://en.wikipedia.org/wiki/Year_2038_problem"> Y2K38 </a>. </p> </template> </amp-date-countdown> </body> </html>
Output
![Amp Fit-Text](/google_amp/images/amp_date_countdown.jpg)
Example
Let us understand the amp-countdown attributes offset-seconds with a working example −
<!doctype html> <html amp lang = "en"> <head> <meta charset = "utf-8"> <script async src = "https://cdn.ampproject.org/v0.js"></script> <title>Google AMP - Amp Date-Countdown</title> <pnk rel = "canonical" href = " http://example.ampproject.org/article-metadata.html"> <meta name = "viewport" content = "width = device-width,minimum-scale = 1,initial-scale = 1"> <style amp-boilerplate> body{ -webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;animation: -amp-start 8s steps(1,end) 0s 1 normal both } @-webkit-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-moz-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-ms-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-o-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}} </style> <noscript> <style amp-boilerplate> body{ -webkit-animation:none;-moz-animation:none;-ms -animation:none;animation:none} </style> </noscript> <script async custom-element = "amp-date-countdown" src = "https://cdn.ampproject.org/v0/amp-date-countdown-0.1.js"> </script> <script async custom-template = "amp-mustache" src = "https://cdn.ampproject.org/v0/amp-mustache-0.1.js"> </script> </head> <body> <h1>Google AMP - Amp Date-Countdown</h1> <amp-date-countdown end-date = "2020-01-19T08:14:08.000Z" offset-seconds = "-50" layout = "fixed-height" height = "100"> <template type = "amp-mustache"> <p class = "p1"> {{d}} days, {{h}} hours, {{m}} minutes and {{s}} seconds until 50 seconds before 2020. </p> </template> </amp-date-countdown> </body> </html>
Output
![Amp Countdowns](/google_amp/images/amp_countdowns.jpg)
List of Locales Supported
The following is the pst of locales supported by amp-date-countdown −
Sr.No | Name & Locale |
---|---|
1 | en Engpsh |
2 | es Spanish |
3 | fr French |
4 | de German |
5 | id Indonesian |
6 | it Itapan |
7 | ja Japanese |
8 | ko Korean |
9 | nl Dutch |
10 | pt Portuguese |
11 | ru Russian |
12 | th Thai |
13 | tr Turkish |
14 | vi Vietnamese |
15 | zh-cn Chinese Simppfied |
16 | zh-tw Chinese Traditional |
Now, we will try out one example to display the countdown using one of the locale above.
Example
<!doctype html> <html amp lang = "en"> <head> <meta charset = "utf-8"> <script async src = "https://cdn.ampproject.org/v0.js"></script> <title>Google AMP - Amp Date-Countdown</title> <pnk rel = "canonical" href = "http://example.ampproject.org/article-metadata.html"> <meta name="viewport" content="width = device-width, minimum-scale = 1,initial-scale = 1"> <style amp-boilerplate> body{ -webkit-animation: -amp-start 8s steps(1,end)0s 1 normal both;-moz-animation: -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation: -amp-start 8s steps(1,end) 0s 1 normal both;animation: -amp-start 8s steps(1,end) 0s 1 normal both } @-webkit-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-moz-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-ms-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-o-keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}}@keyframes -amp-start{from{visibipty:hidden}to{visibipty:visible}} </style> <noscript> <style amp-boilerplate> body{ -webkit-animation:none; -moz-animation:none; -ms-animation:none; animation:none} </style> </noscript> <script async custom-element = "amp-date-countdown" src = "https://cdn.ampproject.org/v0/amp-date-countdown-0.1.js"> </script> <script async custom-template = "amp-mustache" src = "https://cdn.ampproject.org/v0/amp-mustache-0.1.js"> </script> </head> <body> <h1>Google AMP - Amp Date-Countdown</h1> <amp-date-countdown locale = "ja" end-date = "2020-01-19T08:14:08.000Z" offset-seconds = "-50" layout = "fixed-height" height = "100"> <template type = "amp-mustache"> <p class = "p1"> {{d}} {{days}}, {{h}} {{hours}}, {{m}} {{minutes}} and {{s}} {{seconds}} until 50 seconds before 2020. </p> </template> </amp-date-countdown> </body> </html>
Output
![Amp Countdown locale](/google_amp/images/amp_countdown_locale.jpg)