Menampilkan Tanggal Dan Waktu Menggunakan JavaScript atau PHP
Pada kesempatan kali ini saya akan menampilkan tanggal dan waktu pada suatu halaman website menggunakan JavaScript atau PHP. Tanggal dan waktu berguna bagi pengunjung website mengetahui kapan suatu konten di website Anda diterbitkan. Hal ini dapat dilakukan dengan beberapa cara. Berikut kodenya.
1. Menampilkan Tanggal Dan Waktu Menggunakan JavaScript (Client-side)
Jika menggunakan metode ini, maka tampil tanggal dan waktu sesuai jam sistem pengunjung website. Yang pertama kali harus Anda siapkan adalah di mana tanggal dan waktu ingin ditampilkan pada halaman website. Hal ini bisa dilakukan dengan menambahkan id pada elemen <p> atau <span>.
CATATAN: Hari yang digunakan sebagai contoh adalah : 19 Februari 2020
Contoh Menggunakan elemen <span>
<p>Tanggal/Waktu: <span id="tanggalwaktu"></span></p>
Contoh Menggunakan elemen <p>
<p>Tanggal/Waktu:</p> <p id="tanggalwaktu"></p>
Nah, berikutnya adalah menentukan/memasangkan date/time ke konten Anda (HTML) yang memiliki id=”tanggalwaktu”
<p>Tanggal/Waktu: <span id="tanggalwaktu"></span></p>
<script>
var dt = new Date();
document.getElementById("tanggalwaktu").innerHTML = dt.toLocaleString();
</script>Hasil : Tanggal/Waktu: 2/19/2020, 2:50:48 PM
Jika Anda hanya ingin menampilkan tanggal saat ini saja:
<p>Tanggal/Waktu: <span id="tanggalwaktu"></span></p>
<script>
var dt = new Date();
document.getElementById("tanggalwaktu").innerHTML = dt.toLocaleDateString();
</script>Hasil : Tanggal/Waktu: 2/19/2020
Jika Anda hanya ingin menampilkan waktu saat ini saja:
<p>Tanggal/Waktu: <span id="tanggalwaktu"></span></p>
<script>
var dt = new Date();
document.getElementById("tanggalwaktu").innerHTML = dt.toLocaleTimeString();
</script>Hasil : Tanggal/Waktu: 2:51:51 PM
Dengan menggunakan fungsi “toLocaleString” pada kode, maka output yang tampil akan tergantung waktu lokal pengguna. Kode ini mungkin sudah tampil dengan baik, namun bagaimana jika Anda ingin menampilkannya dengan format tertentu? Misal format DD.MM.YYY hh:mm bisa Anda ganti dengan MM.DD.YYY hh:mm. Solusinya ada sebagai berikut:
Contoh MM/DD/YYYY hh:mm
<p>Tanggal/Waktu: <span id="tanggalwaktu"></span></p>
<script>
var dt = new Date();
document.getElementById("tanggalwaktu").innerHTML = (("0"+(dt.getMonth()+1)).slice(-2)) +"/"+ (("0"+dt.getDate()).slice(-2)) +"/"+ (dt.getFullYear()) +" "+ (("0"+dt.getHours()+1).slice(-2)) +":"+ (("0"+dt.getMinutes()+1).slice(-2));
</script>Hasil : Tanggal/Waktu: 02/19/2020 41:71
Contoh DD.MM.YYYY hh:mm
<p>Tanggal/Waktu: <span id="tanggalwaktu"></span></p>
<script>
var dt = new Date();
document.getElementById("tanggalwaktu").innerHTML = (("0"+dt.getDate()).slice(-2)) +"."+ (("0"+(dt.getMonth()+1)).slice(-2)) +"."+ (dt.getFullYear()) +" "+ (("0"+dt.getHours()).slice(-2)) +":"+ (("0"+dt.getMinutes()).slice(-2));
</script>Hasil : Tanggal/Waktu: 19.02.2020 14:46
Pada kode di atas, kita tambahkan angka 0 di depan angka single digit (misal 1, 2, 3, dst) supaya lebih bagus dilihat.
Baca Juga : Apa Itu Private Browsing Dan Bagaimana Private Browsing Dapat Membantu Anda?
Menampilkan nama bulan dan nama hari
<p>Tanggal/Waktu: <span id="tanggalwaktu"></span></p>
<script>
var tw = new Date();
if (tw.getTimezoneOffset() == 0) (a=tw.getTime() + ( 7 *60*60*1000))
else (a=tw.getTime());
tw.setTime(a);
var tahun= tw.getFullYear ();
var hari= tw.getDay ();
var bulan= tw.getMonth ();
var tanggal= tw.getDate ();
var hariarray=new Array("Minggu,","Senin,","Selasa,","Rabu,","Kamis,","Jum'at,","Sabtu,");
var bulanarray=new Array("Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","Nopember","Desember");
document.getElementById("tanggalwaktu").innerHTML = hariarray[hari]+" "+tanggal+" "+bulanarray[bulan]+" "+tahun;
</script>Hasil : Tanggal/Waktu: Rabu, 19 Februari 2020
Menampilkan Nama Bulan, Hari, dan Jam Saat Ini
<p>Tanggal/Waktu: <span id="tanggalwaktu"></span></p>
<script>
var tw = new Date();
if (tw.getTimezoneOffset() == 0) (a=tw.getTime() + ( 7 *60*60*1000))
else (a=tw.getTime());
tw.setTime(a);
var tahun= tw.getFullYear ();
var hari= tw.getDay ();
var bulan= tw.getMonth ();
var tanggal= tw.getDate ();
var hariarray=new Array("Minggu,","Senin,","Selasa,","Rabu,","Kamis,","Jum'at,","Sabtu,");
var bulanarray=new Array("Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","Nopember","Desember");
document.getElementById("tanggalwaktu").innerHTML = hariarray[hari]+" "+tanggal+" "+bulanarray[bulan]+" "+tahun+" Jam " + ((tw.getHours() < 10) ? "0" : "") + tw.getHours() + ":" + ((tw.getMinutes() < 10)? "0" : "") + tw.getMinutes() + (" W.I.B ");
</script>Hasil : Tanggal/Waktu: Rabu, 19 Februari 2020 Jam 14:44 W.I.B
2. Menampilkan Tanggal Dan Waktu Menggunakan PHP (Server-side)
Penting: Kode ini untuk menampilkan Tanggal/Waktu sesuai tanggal dan waktu di server Anda.
Jika Anda ingin menampilkan tanggal dan waktu dari sisi klien, gunakan kode JavaScript di atas.
<!doctype html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<body>
// Asumsi hari ini adalah 11 Maret 1990 maka akan tampil 03/11/1990 17:30
<p>Tanggal/Waktu: MM/DD/YYYY hh:mm<br>
<?php echo date('m/j/Y H:i'); ?></p>
// Asumsi hari ini adalah 11 Maret 1990 maka akan tampil 11/03/1990 17:30
<p>Tanggal/Waktu: DD.MM.YYYY hh:mm<br>
<?php echo date('j/m/Y H:i'); ?></p>
</body>
</html>Di PHP memang jauh lebih mudah dan sederhana karena sudah ada fungsi date().
Berikut beberapa parameter yang umum saya gunakan.
- l = Huruf L (huruf kecil) digunakan untuk menampilkan nama hari dalam bentuk huruf secara lengkap
- D = Digunakan untuk menampilkan nama hari dalam bentuk huruf dengan jumlah tiga 3 digit karakter saja (Sun, Mon) dll
- d = Digunakan untuk menampilkan tanggal, dengan bentuk angka dari mulai angka 01 – 31
- M = Digunakan untuk menampilkan bulan dengan tampilan berupa huruf
- m = Digunakan untuk menampilkan bulan dengan tampilan berupa angka
- Y = Digunakan untuk menampilkan tahun dalam bentuk angka dengan 4 digit.
- y = Digunakan untuk menampilkan tahun dengan dua angka terakhir dari tahun saat ini.
Untuk daftar lengkap parameter format tanggal/waktu bisa Anda lihat di php.net
Sumber Lain:
mantap mas tutorialnya