23 April 2015

Cara simple menampilkan tanggal dengan JavaScript


Selalu ada cara untuk membuat diri kita bahagia, Salah satunya adalah dengan berbagi kepada sesama...
Sumber gambar : http://cdn.klimg.com/vemale.com/p/Menebak_Sifat_Berdasarkan_Tanggal_Lahir2.jpg

Di hari yang indah dalam alunan lagu-lagu santai di pagi hari. Saya ingin berbagi kepada para blogger yang lagi browsing tantang Cara menampilkan tanggal sesuai dengan format yang biasa dilihat. Oke langsung saja saya akan ceritakan bagaimana sebuah tanggal di tampilkan dalam bahasa script JavaScript pada halaman HTML. Berikut adalah code JavaScript pada halaman HTML.

<!-- Nama File : apapun.html -->
<!DOCTYPE html>
<html>
<head>
 <title>Tanggal Pake JavaScript</title>
</head>
<body>
<p id="tempatTanggal"></p>
<script>
    var Tanggal = new Date();
    var Hari = ["Minggu","Senin","Selasa","Rabu","Kamis","Jumat","Sabtu"];
    var Bulan =["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"];
    document.getElementById("tempatTanggal").innerHTML = Hari[Tanggal.getDay()]+", "+Tanggal.getDate()+" "+Bulan[Tanggal.getMonth()]+" "+Tanggal.getFullYear();
</script>
</body>
</html>


Kode di atas bercerita tentang bagaimana sebuah tanggal di tampilkan. Kode yang digunakan untuk menampilkan format tanggal berada pada kode sebagai berikut.

Hari[Tanggal.getDay()]+", "+Tanggal.getDate()+" "+Bulan[Tanggal.getMonth()]+" "+Tanggal.getFullYear();

Hari adalah sebuah array yang berisi nama hari dari hari Minggu sebagai indeks ke-0 sampai Sabtu sebagai indek ke-6. Method getDay() adalah method dari Date() untuk mendapatkan indeks hari lokal yaitu 0 sampai 6 yang dimulai dengan hari Minggu. Method getDate() digunakan untuk mendapatkan tanggal dengan angka 1 sampai 31.

Bulan adalah sebuah array yang berisi nama-nama bulan. Method getMonth()  adalah method yang digunakan untuk mendapatkan indeks bulan dari 0 sampai 11 dimana indeks 0 adalah bulan Januari sampai 11 adalah Desember. Method getFullYear() adalah method yang digunakan untuk mendapatkan tahun dengan format yang lengkap yaitu YYYY. 

JavaScript mempunyai berbagai cara untuk menampilakan hasil data pada elemen HTML. diantaranya adalah kode berikut.

document.getElementById("tempatTanggal").innerHTML = cetakTanggal; 

Pada kode diatas, tempatTanggal  merupakan sebuah id yang akan di letakkan pada elemen HTML, misal dalam contoh diatas adalah elemen <P> (paragraf). Kode innerHTML digunakan untuk menampilkan data yang di embed / dimasukkan pada sebuah elemen HTML dalam contoh diatas ouput di masukkan kedalam elemen <P> (Paragraf).

Nah, itulah salah satu cara untuk menampilkan tanggal dengan format yang kita inginkan. Semoga tutorial ini bermanfaat bagi para blogger. Terima kasih atas kunjungannya.... good day!