Cara Menampilkan Tanggal dan Waktu (saat ini) Dengan Menggunakan JavaScript

Bareh

28 Feb, 2023

Cara Menampilkan Tanggal dan Waktu (saat ini) Dengan Menggunakan JavaScript

Menampilkan tanggal dan waktu pada sebuah website merupakan hal yang penting, karena dapat membantu pengunjung untuk mengetahui informasi terkait waktu dan tanggal saat website tersebut diakses. Nah, dalam artikel kali ini kita akan membahas tentang cara menampilkan tanggal dan waktu saat ini pada sebuah website menggunakan JavaScript.

Sebelum kita mulai, pastikan bahwa kamu memiliki pengetahuan dasar mengenai JavaScript. Jika kamu masih belum memahami JavaScript, maka kamu perlu mempelajarinya terlebih dahulu sebelum mempraktikkan tutorial ini.

Cara Menampilkan Tanggal dan Waktu Menggunakan setInterval()

Berikut adalah contoh kode untuk menampilkan tanggal dan waktu saat ini menggunakan method setInterval():

<!DOCTYPE html>
<html>
  <head>
    <title>Cara Menampilkan Tanggal dan Waktu (saat ini) Dengan Menggunakan JavaScript</title>
  </head>
  <body>
    <p>Tanggal saat ini adalah:</p>
    <p id="date"></p>
    <p>Waktu saat ini adalah:</p>
    <p id="time"></p>

    <script>
      function displayDateTime() {
        let date = new Date();
        let dayNames = ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"];
        let dayName = dayNames[date.getDay()];
        let monthNames = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];
        let monthName = monthNames[date.getMonth()];
        let day = date.getDate();
        let year = date.getFullYear();
        let hours = date.getHours();
        let ampm = hours >= 12 ? "PM" : "AM";
        hours = hours % 12;
        hours = hours ? hours : 12;
        let minutes = date.getMinutes();
        let seconds = date.getSeconds();

        let dateString = `${dayName}, ${day} ${monthName} ${year}`;
        document.getElementById("date").innerHTML = dateString;

        let timeString = `${hours}:${minutes}:${seconds} ${ampm}`;
        document.getElementById("time").innerHTML = timeString;
      }

      setInterval(displayDateTime, 1000);
    </script>
  </body>
</html>

Method ini memungkinkan kita untuk menjalankan kode tertentu secara terus-menerus dengan interval waktu yang ditentukan.

Output dari kode diatas

Pada bagian HTML, terdapat dua elemen <p> kosong dengan id "date" dan "time" yang akan digunakan untuk menampilkan tanggal dan waktu saat ini.

Sedangkan pada bagian JavaScript, terdapat sebuah function displayDateTime() yang akan dijalankan setiap detik menggunakan method setInterval(). Function ini menggunakan objek Date() untuk memperoleh waktu saat ini dan melakukan beberapa hal sebagai berikut:

Mendapatkan nama hari dan bulan menggunakan array dayNames dan monthNames berdasarkan indeks hari dan bulan dari objek Date().
Mengambil hari, bulan, tahun, jam, menit, dan detik dari objek Date().
Melakukan konversi pada jam untuk mengubah format waktu dari 24 jam menjadi format 12 jam dengan menambahkan variabel ampm.
Menggabungkan variabel-variabel tersebut ke dalam format tanggal dan waktu yang diinginkan.
Menampilkan hasilnya pada elemen <p> dengan id "date" dan "time" menggunakan method innerHTML().

Dengan kode ini, pengguna dapat melihat tanggal dan waktu yang terus diperbarui pada halaman web secara otomatis setiap detik.

Kesimpulan

Menampilkan tanggal dan waktu saat ini pada website menggunakan JavaScript cukup mudah. Kita dapat menggunakan method setInterval() untuk memperbarui informasi tersebut secara otomatis. Penting untuk diingat bahwa ketika menampilkan tanggal dan waktu pada website, kita perlu memperhatikan format dan timezone yang sesuai dengan pengguna website.

Semoga artikel ini dapat membantu kamu untuk menampilkan tanggal dan waktu saat ini pada website menggunakan JavaScript. Jangan ragu untuk menghubungi kami jika kamu memiliki pertanyaan atau ingin berbagi pengalaman mengenai topik ini.