Selamat datang di tutorial JavaScript #9! 🚀

Pada bagian ini, kita akan mempelajari cara bekerja dengan tanggal dan waktu menggunakan objek Date bawaan JavaScript. Pengetahuan ini sangat penting untuk berbagai fitur web, seperti jam digital, kalender, atau menghitung selisih waktu.

Apa Itu Objek Date?

Objek Date adalah objek bawaan JavaScript yang memungkinkan kita untuk menyimpan, mendapatkan, dan memanipulasi informasi tanggal dan waktu. Objek Date mewakili satu titik waktu spesifik yang dihitung dari 1 Januari 1970 UTC.

Membuat Objek Date

Ada beberapa cara untuk membuat objek Date:

1. Tanggal dan Waktu Saat Ini

Cara paling umum adalah dengan memanggil new Date() tanpa argumen. Ini akan membuat objek Date yang berisi tanggal dan waktu saat ini.

const hariIni = new Date();
console.log(hariIni); // Output: Tue Aug 12 2025 13:53:20 GMT+0700 (Western Indonesia Time)

2. Tanggal dan Waktu Spesifik

Anda bisa membuat tanggal spesifik dengan memberikan argumen berupa angka.

// new Date(tahun, bulan, hari, jam, menit, detik, milidetik)
// Penting: Bulan dimulai dari 0 (Januari) hingga 11 (Desember).
const tanggalSpesifik = new Date(2025, 7, 12, 10, 30, 0); // 12 Agustus 2025, 10:30:00
console.log(tanggalSpesifik);

Perhatikan bahwa bulan Agustus diwakili oleh angka 7.

3. Dari Sebuah String

Anda juga bisa membuat objek Date dari sebuah string tanggal.

const tanggalString = new Date("2025-08-12T10:30:00");
console.log(tanggalString);

Metode untuk Mendapatkan Tanggal (Get Methods)

Setelah Anda memiliki objek Date, Anda dapat mengambil berbagai komponennya menggunakan metode get....

const d = new Date();
console.log("Tahun saat ini: " + d.getFullYear());
console.log("Bulan saat ini: " + d.getMonth()); // Ingat, bulan dimulai dari 0
console.log("Hari ini tanggal: " + d.getDate());

Metode untuk Mengubah Tanggal (Set Methods)

Anda juga bisa mengubah komponen tanggal dan waktu dengan metode set....

const d = new Date();
d.setFullYear(2026); // Mengubah tahun menjadi 2026
d.setMonth(0);       // Mengubah bulan menjadi Januari
console.log(d);

Menampilkan Tanggal dengan Rapi (toLocaleString())

Secara default, output dari objek Date mungkin tidak mudah dibaca. Anda bisa memformatnya dengan rapi menggunakan metode toLocaleString().

const hariIni = new Date();
console.log(hariIni.toLocaleString('id-ID')); // Output: "12/8/2025, 13.53.20"

Anda juga bisa memberikan opsi untuk memformatnya sesuai keinginan:

const opsi = {
  weekday: 'long', // Nama hari lengkap
  year: 'numeric',
  month: 'long',
  day: 'numeric'
};

console.log(hariIni.toLocaleString('id-ID', opsi)); // Output: "Selasa, 12 Agustus 2025"

Contoh Praktis: Menampilkan Tanggal di Halaman Web

Berikut adalah contoh lengkap untuk menampilkan tanggal dan waktu saat ini di sebuah elemen HTML.

HTML

<p>Hari ini adalah:</p>
<p id="waktuSaatIni"></p>

JavaScript

// Dapatkan elemen HTML tempat kita akan menampilkan tanggal
const elemenTanggal = document.getElementById('waktuSaatIni');

// Buat objek Date baru
const hariIni = new Date();

// Opsi format tampilan
const opsiTampilan = {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit'
};

// Ubah konten elemen HTML dengan tanggal yang sudah diformat
elemenTanggal.textContent = hariIni.toLocaleString('id-ID', opsiTampilan);

Dengan kode di atas, paragraf akan menampilkan tanggal dan waktu yang mudah dibaca.

Kesimpulan

Bekerja dengan tanggal di JavaScript menjadi mudah berkat objek Date dan metode-metode bawaannya. Anda bisa dengan cepat mendapatkan, mengubah, dan memformat tanggal dan waktu sesuai kebutuhan aplikasi web Anda. Selamat mencoba!