Cara menggunakan coding tanggal html

Question

Lembar Kerja 05 | Dwi Herliabriyana

Table of Contents Show

AttributesAtribut HTML Tag <time>
Global AttributesAtribut Secara Global (Keseluruhan)
Event AttributesAtribut event (Peristiwa)
ExampleContoh HTML <time> element
Contoh Lengkap

DWI HERLIABRIYANA, SELAMAT MENJALANKAN TUGAS...

Sistem Informasi Rumah Sakit

Input Data Pasien

Kode Pasien
Tanggal Masuk
Nama Pasien
Tanggal Lahir
Tempat Lahir
Jenis Kelamin
Alamat Pasien
Usia
Kode Ruangan	Jenis
Nama Ruangan	Nomor Ranjang
Penyakit yang diderita

Copyright @ Dwi Herliabriyana 2016
Teknik Informatika 3 | Stikom Poltek Cirebon

saat validasi w3. error di inputan "date" kak. keterangannya : The date input type is not supported in all browsers. Please be sure to test, and consider using a polyfill. terimakasih

Pertama, sobat buka code editor yang sobat gunakan. Pada contoh kita akan menggunakan sublime text. kemudian buat sebuah file.html dengan nama bebas yang bisa sobat letakkan pada sebuah folder. Sobat bisa ketikkan code berikut :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Test</title>
	<link rel="stylesheet" type="text/css" href="style.css">
	<script type="text/javascript" src="./script.js" async></script>
</head>
<body>
	<p>Jam Simpel JavaScript</p>
	<div id="DisplayClock" class="clock" onload="showTime()"></div>
</body>
</html>

Pada bagian body, kita buat sebuah <div> yang memiliki id='DisplayClock' yang nantinya akan menjalankan secara langsung fungsi javascript showTime() dengan fungsi onload.

Kita panggil javascript yang nantinya kita buat di langkah kedua dengan nama script.js. Kita memanggilnya / includenya dengan tag <script> di head.

Kedua, kita buat file baru pada folder yang sama dengan format filenya .js atau yang kita sebut file javascript. Pada contoh kita simpan dengan nama script.js. Selanjutnya sobat ketikkan code berikut :

function showTime(){
	var date = new Date();
	var h = date.getHours();
	var m = date.getMinutes();
	var s = date.getSeconds();
	var session = "AM";

	if(h == 0){
		h = 12;
	}
	if (h > 12) {
		h = h - 12 ;
		session = "PM";
	}

	h = (h<10) ? "0" + h : h;
	m = (m<10) ? "0" + m : m;
	s = (s<10) ? "0" + s : s;

	var time = h + ":" + m + ":" + s + " " + session;

	document.getElementById("DisplayClock").innerText = time;
	document.getElementById("DisplayClock").textContent = time;

	setTimeout(showTime, 1000);
}

showTime();

Pada file sript.js, kita buat sebuah fungsi yang bernama showTime(). Fungsi ini sudah kita panggil juga pada langkah pertama pada halaman HTML. Variabel var date untuk date/tanggal, var h untuk menyimpan hour/jam , var m untuk minute/menit, var s untuk second/detik, dan var session untuk penanda waktu AM & PM. Jam akan ditampilkan pada element html yang memiliki id DisplayClock.

HTML <time> element digunakan untuk merepresentasikan sebuah waktu 24-jam atau tanggal, tepatnya tanggal dalam sistem masehi (dikenal dengan nama "Gregorian Calendar") dengan tambahan waktu dan informasi zona waktu (timezone) yang dapat ditulis secara opsional.

Element <time> sering digunakan bersama attribute datetime yang digunakan dengan maksud untuk menunjukkan waktu yang dapat dimengerti oleh mesin-pembaca (machine-readable) sehingga dapat dimanfaatkan oleh browser (user-agent) seperti untuk mengingat tanggal lahir user, tugas, acara dan kalender pengingat lainnya.

<time> yang tidak memiliki attribute datetime tidak boleh terdapat element apapun didalamnya dan hanya berisi dengan konten keterangan waktu sesuai format standard (ISO 8601).

Konten didalam <time> element diisi dengan tanggal, waktu, zona waktu atau durasi yang ditulis dengan format yang beraneka ragam. Contohnya dapat dilihat dibawah.

HTML <time> merupakan tag yang baru diperkenalkan pada HTML5.

AttributesAtribut HTML Tag <time>

datetime

Menentukkan format tanggal dan waktu yang dapat dipahami oleh mesin-pembaca (machine-readable)

Value: format penulisan tanggal dan waktu yang valid (ISO 8601)

Contoh:

<time datetime="1945-08-17">Jumat, 17 Agustus 1945</time>

Penulisan tanggal untuk datetime menggunakan format standar international ISO 8601 yang diawali dengan tahun, bulan dan tanggal yang dipisahkan dengan tanda strip (-) seperti contoh diatas. Jika atribut datetime disebutkan, maka konten di dalam <time> dapat diisi dengan format tanggal yang relevan (contoh konten diatas adalah format penulisan tanggal Bahasa Indonesia). Untuk format selengkapnya, dapat dilihat pada pembahasan mengenai HTML datetime attribute.

Global AttributesAtribut Secara Global (Keseluruhan)

<time> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Silahkan, lihat referensi mengenai HTML Global Attribute

Event AttributesAtribut event (Peristiwa)

<time> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Silahkan, lihat referensi mengenai HTML Events Attribute

ExampleContoh HTML <time> element

Example 1

Contoh HTML <time> element tanpa atribut datetime, oleh karenanya konten di dalam time harus sesuai dengan format standar (valid).

HTML

<p> Saya mulai bekerja pada
<time>2012-06-01</time>
</p>

Jika format yang ditulis tidak valid, maka element <time> tidak menunjukkan waktu yang dapat diasosiasikan.

Example 2

Contoh HTML <time> element yang hanya menggunakan keterangan waktu (jam).

HTML

<p>
Saya bekerja pada pukul <time>08:00</time> dan pulang pukul <time>17:00</time>
</p>

Example 3

Contoh HTML <time> element yang digunakan untuk menulis tanggal dipublikasikannya sebuah artikel, lengkap dengan microdata schema.org.

HTML

<article itemscope itemtype="http://schema.org/Article">
  <h1 itemprop="headline">Cara Menyisipkan Tanggal di dalam HTML</h1>
  <footer>Ditulis Pada:
    <time itemprop="datePublished" datetime="2015-08-17">Senin, 17 Agustus 2015</time>.
  </footer>
  <p itemprop="description">Untuk menyisipkan tanggal dan waktu di dalam halaman HTML gunakan element &lt;time&gt;.</p>
</article>