Menampilkan tanggal dan waktu pada blog AMP

Introduction AMP-Date

AMP-Date adalah component tambahan dari AMP untuk menampilkan tanggal saat ini atau tanggal yang bisa dicustom pada Halaman AMP. Component ini bersifat input manual artinya anda harus menambahkan script untuk memakainya. Dalam component ini juga tersedia berbagai bahasa sesuai dengan lokasi yang disetting. Framework ini juga bisa dipakai di blog Non AMP.

Summary: dalam tutorial ini anda akan mempelajari cara penggunaan AMP-Date-Display dan juga pengaplikasian AMP-Mustache

Berikut ini adalah contohnya

<div class='table'>
  <amp-date-display datetime="now" locale='id-ID' width='auto' layout="fixed-height" height="312">
<template type="amp-mustache"> 
  <table style='white-space: nowrap;'>
    <thead>
      <tr>        
        <th>Menampilkan Waktu Sekarang</th>
        <th>Value</th>        
      </tr>
    </thead>
    <tbody>
      <tr>        
        <td>Hari</td>
        <td>{{dayName}}</td>        
      </tr>
      <tr>        
        <td>Tanggal</td>
        <td>{{dayTwoDigit}}</td>
      </tr>
      <tr>        
        <td>Bulan</td>
        <td>{{monthName}}</td>
      </tr>
      <tr>        
        <td>Tahun</td>
        <td>{{year}}</td>        
      </tr>
    </tbody>
  </table>
</template>
</amp-date-display>
</div>

datetime="now" adalah hasil render sesuai dengan waktu saat ini.

Require Script

Tambahkan script di bawah ini tepat pada bagian atas </head>
AMP-Date-Display

<script async custom-element="amp-date-display" src="https://cdn.ampproject.org/v0/amp-date-display-0.1.js"></script>

Dan tambahkan juga script AMP-Mustache di bawah ini bersamaan dengan script AMP-Date-Display supaya bisa script diatas bisa digunakan.

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

Usage

Untuk menampilkan waktu hari ini adalah dengan penambahan atribute datetime="now" dan juga untuk menampilkan tahun adalah {{year}}

Untuk atribute datetime="now" adalah untuk menampilkan waktu sekarang. Sedangkan untuk atribute locale="id-ID" adalah untuk menampilkan bahasa daerah untuk Indonesia (untuk atribute locale defaultnya adalah bahasa Inggris "en")

Simple Usage

<amp-date-display datetime="now" layout="fixed-height" height="25">
  <template type="amp-mustache">Today is {{dayName}}, {{day}} {{monthName}} {{year}}</template>
</amp-date-display>

List penggunaan AMP-Date-Display

Example

Menampilkan tahun pada footer blog dan AMP Blog

<amp-date-display datetime="now" layout="fixed-height" height="70"><!--height bisa disesuaikan sesuai dengan templatenya-->
<template type="amp-mustache">
  &#169; 2015 -{{year}} <strong>R-Sights</strong>. All rights reserved
</template>
</amp-date-display>

Attribute AMP-Date-Display

Attribute datetime="now/isoformat" (Require)

Attribute datetime tidak boleh kosong, anda bisa mengisinya dengan value now untuk menampilkan waktu saat ini atau custom lainnya dengan format Iso 8601

Contoh pada attribute datetime adalah now

Attribute layout="string_layout" (Require)

Layout sangat diperlukan hampir disemua Component AMP karena untuk menentukan posisi component tersebut. Sebagai contoh jika kita menaruh layout="fixed" maka item tersebut tidak akan responsive(tidak dapat diperkecil atau diperbesar ukuran layar) terhadap ukuran viewport (ukuran layar, width/height). Sedangkan jika kita menaruh layout="fixed-height" maka yang berpengaruh adalah viewport pada width, sementara height tetap.

Attribute width dan Height (Require)

Attribute ini adalah untuk ukuran component. Dan attribute ini harus diisi dengan string angka. misalnya height="10" itu sama dengan height="10px"

Pengecualian untuk layout="fixed-height" anda dapat mengisi atribute width="auto" atau tidak memakainya

Attribute timestamp-ms dan timestamp-seconds (Additional)

Keduanya adalah pengganti untuk attribute datetime

• timestamp-ms digunakan untuk waktu untuk miliseconds
• sedangkan timestamp-seconds untuk waktu second

<!--example timestamp-ms="100000000" in miliseconds-->
  <amp-date-display timestamp-ms="100000000" layout="fixed-height" height="25"> 
      <template
          type="amp-mustache">{{dayName}}, {{day}} {{monthName}} {{year}} {{hourTwoDigit}}:{{minuteTwoDigit}}:{{secondTwoDigit}}
      </template>
  </amp-date-display>
  
  <!--example timestamp-seconds="100000000" in seconds-->
  <amp-date-display timestamp-seconds="100000000" layout="fixed-height" height="25">
      <template
          type="amp-mustache">{{dayName}}, {{day}} {{monthName}} {{year}} {{hourTwoDigit}}:{{minuteTwoDigit}}:{{secondTwoDigit}}
      </template>
  </amp-date-display>      
  

Attribute locale="Country_ID" (Optional)

Jika Attribute locale kosong maka defaultnya adalah "en". Untuk menampilkan waktu dari berbagai negara anda harus menambahkan atribute locale. Example locale="id-ID" untuk menampilkan format waktu pada bahasa Indonesia.

Menampilkan Waktu dari berbagai Negara

<amp-date-display datetime="now" locale="your_Country_ID" layout="fixed-height" height="25">
<template type="amp-mustache">{{dayName}}, {{day}} {{monthName}} {{year}}</template>
</amp-date-display>

Attribute offset-seconds

Pada AMP-Date-Display untuk memundurkan waktu atau memajukan waktu sangat mudah hanya menambahkan attribute offset-seconds="" dan valuenya harus dalam detik

  <!--Offset-seconds 172800 adalah 2 hari sesudah-->
  <amp-date-display datetime="now" offset-seconds="172800" layout="fixed-height" height="25">
      <template type="amp-mustache">
          2 Days before today is {{dayName}}, {{day}} {{monthName}} {{year}}
      </template>
  </amp-date-display>

  <!--Offset-seconds -172800 adalah 2 hari sebelumnya-->
  <amp-date-display datetime="now" offset-seconds="-172800" layout="fixed-height" height="25">
      <template type="amp-mustache">
          2 Days before today is {{dayName}}, {{day}} {{monthName}} {{year}}
      </template>
  </amp-date-display>
  

Kesimpulan

• Banyak pengaplikasian dalam memperlihatkan tanggal pada web. Terutama jika ingin menampilkan waktu sekarang untuk bagian footer website, dan juga untuk menampilkan waktu saat ini untuk kemudahan UX Web.
• Untuk memakai component ini diharuskan anda mencantumkan Script Require !--Link disini
• Untuk menampilkannya anda hanya harus memakai AMP-Mustache.
• Untuk pemisah AMP-Date dapat dilakukan dengn cara seperti ini {{dayName}}, {{day}}/{{monthName}}-{{year}} {{hourTwoDigit}}:{{minuteTwoDigit}}:{{secondTwoDigit}}

Referensi:
https://amp.dev/documentation/examples/components/amp-date-display/
https://amp.dev/documentation/components/amp-timeago/#locale-(optional)
https://amp.dev/documentation/guides-and-tutorials/learn/amp-html-layout/?format=websites#layout
https://amp.dev/documentation/guides-and-tutorials/learn/amp-html-layout/layouts_demonstrated/
https://github.com/ampproject/amphtml/issues/10837