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

Y2K38 will be at 2038-01-19T03:14:08.000Z

<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}}

variable	value
day	17
dayName	Saturday
dayNameShort	Sat
dayPeriod	pm
dayTwoDigit	17
hour	16
hour12	4
hour12TwoDigit	04
hourTwoDigit	16
iso	2025-05-17T16:59:00.243Z
minute	59
minuteTwoDigit	59
month	5
monthName	May
monthNameShort	May
monthTwoDigit	05
second	0
secondTwoDigit	00
year	2025
yearTwoDigit	25

<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.

de: Samstag 17 Mai 2025

fr: samedi 17 mai 2025

cs: sobota 17 květen 2025

en-GB: Saturday 17 May 2025

<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 مشاركتك ومساهمتك بشدة! ونأمل أن تكون مشاركًا دائمًا في مجتمعنا مفتوح المصدر، ولكننا نشجع أيضًا المساهمات التي تحدث لمرة واحدة في الأمور التي تتحمس لها.

تعديل العينة على GitHub

Written by @cvializ