Belajar HTML datetime attribute

HTML Fadlullah Fadul December 3, 2018

Referensi Belajar HTML datetime attribute. Tutorial dan panduan mengenai atribute datetime yang digunakan untuk menulis keterangan tanggal dan waktu dengan format tertentu.

Deskripsi
Pengertian & Penjelasan datetime

HTML datetime attribute digunakan untuk mengasosiasikan tanggal atau waktu dengan format yang berlaku (valid) sesuai dengan standar international (ISO 8601).

Format penulisan tanggal yaitu diawali dengan tahun, bulan dan hari yang dipisahkan dengan tanda strip (-). Untuk tahun, ditulis sebanyak 4 karakter (contoh: 2015), sedangkan bulan dan hari masing-masing 2 karakter. Aturan selengkapnya dapat dilihat pada syntax dan contoh yang akan dijelaskan dibawah ini:

Syntax
Penggunaan Sintaksis

Syntax 1:

datetime="YYYY-MM-DDThh:mm:ssTZD"

Keterangan:

  • YYYY = Year (Menunjukkan Tahun), ditulis 4 digit
  • MM = Month (Menunjukkan Bulan), ditulis 2 digit (contoh: 01 adalah bulan Januari)
  • DD = Day (Menunjukkan Hari atau tepatnya tanggal), ditulis 2 digit
  • T = Time (menunjukkan Waktu). Harus ditulis dengan huruf kapital (bukannya "t"). Keterangan ini dapat diganti dengan spasi. Jika ditulis, maka keterangan waktu harus ditulis dengan format berikut:
  • hh = hours (menunjukkan Jam), ditulis dengan format 24 jam (contoh: 21 adalah jam 9 malam)
  • mm = minutes (menunjukkan Menit), ditulis 2 digit
  • ss = seconds (menunjukkan detik), ditulis 2 digit
  • TZD = Time Zone Designator (menunjukkan zona waktu), contohnya: zona waktu Indonesia Bagian Barat (WIB) adalah +07:00, atau ditambah 7 jam (UTC+07:00)

Contoh: datetime="2015-05-06T20:00+07:00" Keterangannya adalah jam 8 malam WIB tanggal 6 bulan Mei tahun 2015. Untuk keterangan waktu (T) dapat diganti dengan spasi, sehingga contoh diatas sama dengan contoh dibawah ini:
datetime="2015-05-06 20:00+07:00"

Syntax 2:

datetime="PTDHMS"

Keterangan:

  • P = Period (Memberikan keterangan Periode waktu)
  • T = Time (Memberikan keterangan waktu)
  • D = Days (menunjukkan Hari)
  • H = Hours (menunjukkan Jam)
  • M = Minutes (menunjukkan Menit)
  • S = Seconds (menunjukkan Detik)

Contoh: datetime="PT12H30" Artinya, menunjukkan periode waktu selama 12 jam 30 menit.

Contoh Penulisan
Format Tanggal dan Waktu yang Benar 

Format tanggal:
<time datetime="2015">  <!-- artinya, tahun 2015 -->
<time datetime="2015-08">  <!-- artinya, bulan Agustus (bulan 8) tahun 2015 -->
<time datetime="2015-08-17">  <!-- artinya, tanggal 17 Agustus tahun 2015 -->
<time datetime="08-17">  <!-- atinya tanggal 17 bulan Agustus tahun berapapun -->
<time datetime="2015-W20">  <!-- artinya, minggu ke-20 pada tahun 2015 -->

Format Tanggal dan Waktu:
<time datetime="2015-08-17T07:00">  <!-- artinya, jam 7 tanggal 17-08-2015 -->
<time datetime="2015-08-17 07:00">  <!-- sama artinya, jam 7 tanggal 17-08-2015 -->
<time datetime="2015-08-17 07:00:15">  <!-- dengan tambahan 15 detik -->
<time datetime="2015-08-17 07:00:35.586">  <!-- dg tambahan mili detik -->
<time datetime="07:00">  <!-- artinya jam 7 -->
<time datetime="07:00+07:00">  <!-- artinya jam 7 WIB (UTC+7 jam)  -->

Durasi:
<time datetime="P5D">  <!-- artinya, durasi waktu selama 5 hari -->
<time datetime="PT12H15M">  <!-- artinya, durasi waktu 12 jam 15 menit -->

Example
Contoh HTML datetime attribute

Contoh 1

Contoh pengunaan attribute datetime di dalam element <time>

<p>Acara dimulai pada:
<time datetime="2015-03-07">07 Maret 2015</time>
</p>

Pelajari selengkapnya mengenai HTML <time> element.

Contoh 2

Contoh pengunaan attribute datetime di dalam element <del> dan <ins>

<p> Acara Malam ini adalah
<del datetime="2015-08-22 21:21:05">Menghadiri Pesta</del>
<ins datetime="2015-08-22 21:23:30">Menghadiri Ceramah di Masjid</ins>.
</p>

Pelajari selengkapnya mengenai HTML <del> dan <ins> element.

Contoh Lengkap

Contoh source code lengkap disertai dengan demo hasil output kode (preview).

SOURCE
editor 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Demo HTML datetime attribute</title>
<style>

</style>
</head>
<body>
<h3>Contoh 1</h3>
<p>Acara dimulai pada:
  <time datetime="2015-03-07">07 Maret 2015</time>
</p>

<hr />
<h3>Contoh 2</h3>
<p> Acara Malam ini adalah
  <del datetime="2015-08-22 21:21:05">Menghadiri Pesta</del>
  <ins datetime="2015-08-22 21:23:30">Menghadiri Ceramah di Masjid</ins>.
</p>

</body>
</html>
SHARE
Previous Article Next Article