We use cookie to improve your experience on our site. By using our site you consent cookies. See our Cookies Policy and Privacy Policy for more datails

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

String Output (now) Code
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}}

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>
<>Silahkan ganti sesuai dengan code List penggunaan AMP-Date-Display<--Link

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

String Example Value Explanation
now datetime="now" Current date
yyyy-mm-dd datetime="2021-07-26", datetime="2021-12-06" Custom without time
yyyy-mm-ddThh:mm:ss datetime="2021-07-26T12:20:46" ISO with Date and Time
iso format datetime="2021-07-26T12:20:46.766Z" Full Iso 8601 Format

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.

String Value
layout container fill fixed fixed-height flex-item intrinsic nodisplay responsive
More details klik link ini
More details in animation layout klik link ini

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
Country Country_ID Output(now)
Default
English en
Russian ru
Portuguese pt-BR
Japanese ja
Thai th
Korean ko
Indonesia id-ID
Arabicar
Belarusianbe
Bulgarianbg
Banglabn-IN
Catalanca
Czechcs
Danishda
Germande
Greekel
Englishen
English shorten-short
Spanishes
Basqueeu
Persian Farsifa
Finnishfi
Frenchfr
Galiciangl
Hebrewhe
Hindihi-IN
Hungarianhu
Malayid-ID
Italianit
Japaneseja
Georgianka
Koreanko
Malayalamml
Burmese Myanmarmy
Norwegiannb-NO
Dutchnl
Norwegiannn-NO
Polishpl
Portuguesept-BR
Romanianro
Russianru
Albaniansq
Serbiansr
Swedishsv
Tamilta
Thaith
Turkishtr
Ukrainianuk
Vietnamesevi
Chinesezh-CN
Taiwanesezh-TW
Taiwanesezh-TW
<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

Posting Komentar

  1. Berkomentarlah dengan sopan, tidak Sara atau SPAM. Author berhak menghapus komentar & tidak dapat diganggu gugat.
  2. Komentar ini, diurutkan dari yang terbaru
  3. Tinggalkan komentar sesuai topik tulisan
  4. Tambahkan Response anda tentang artikel ini dengan menggunakan tag #Yes atau #No berserta alasannya
  5. Jika ada pertanyaan tambahkan tag #Ask
  6. Gunakan <i rel='pre'><!--[Parse Code]--></i> Untuk menambahkan Code(dalam bentuk parse HTML) pada komentar