menengahdatewaktuMenengah3 mnt baca

Date: Dasar

Membuat object Date, membaca komponennya (tahun, bulan, tanggal, jam), dan memakai timestamp. Tanggal dan waktu adalah nyawa fitur nyata: jadwal, countdown, riwayat transaksi, dan validasi umur.

Membuat Date

javascript

const sekarang = new Date();
console.log(sekarang); // tanggal & waktu saat ini, mis. Thu Oct 08 2026...

new Date() tanpa argumen selalu berarti "saat ini juga", mengikuti jam perangkat. Untuk tanggal spesifik, beri argumen tahun, bulan, tanggal (dan opsional jam, menit, detik):

javascript

const ultah = new Date(2008, 4, 17); // 17 Mei 2008
const janjian = new Date(2026, 9, 20, 14, 30); // 20 Okt 2026, 14:30

PERHATIAN BESAR: bulan dimulai dari 0! Januari = 0, Februari = 1, ..., Desember = 11. Jadi new Date(2008, 4, 17) adalah 17 MEI, bukan April. Ini keputusan desain dari era 90-an yang tidak bisa diubah lagi, dan jebakan abadi bagi semua programmer JavaScript.

Cara aman mengingatnya: "bulan manusiawi dikurangi 1". Atau buat tanggal dari string ISO yang tidak ambigu: new Date("2008-05-17") (format YYYY-MM-DD, bulan normal 1-12).

Membaca Komponen

javascript

const d = new Date(2008, 4, 17, 10, 30);
d.getFullYear(); // 2008
d.getMonth();    // 4 (Mei, ingat 0-based!)
d.getDate();     // 17 (tanggal dalam bulan)
d.getDay();      // 6 (hari dalam minggu: 0=Minggu, 6=Sabtu)
d.getHours();    // 10
d.getMinutes();  // 30

Waspadai pasangan yang mirip tapi beda: getDate() = tanggal dalam bulan (1-31), getDay() = hari dalam minggu (0-6). Tertukar keduanya adalah bug klasik: "tanggal 6" vs "hari Sabtu" itu hal yang sangat berbeda.

Contoh nyata, menyapa user berdasarkan waktu:

javascript

const jam = new Date().getHours();
let sapaan;
if (jam < 11) sapaan = "Selamat pagi";
else if (jam < 15) sapaan = "Selamat siang";
else if (jam < 19) sapaan = "Selamat sore";
else sapaan = "Selamat malam";
console.log(sapaan);

Timestamp: Tanggal sebagai Angka

Setiap Date pada dasarnya adalah satu angka: jumlah milidetik sejak 1 Januari 1970 00:00:00 UTC (disebut "epoch"). Angka ini disebut timestamp:

javascript

Date.now(); // mis. 1728390000000 (berubah tiap milidetik)
const lahir = new Date(2008, 4, 17);
lahir.getTime(); // timestamp tanggal lahir

Karena tanggal hanyalah angka, operasi tanggal menjadi operasi aritmatika biasa. Selisih dua timestamp = selisih waktu dalam milidetik:

javascript

// Hitung umur kasar dari tanggal lahir
const lahir2 = new Date(2008, 4, 17);
const msPerTahun = 1000 * 60 * 60 * 24 * 365;
const umur = Math.floor((Date.now() - lahir2.getTime()) / msPerTahun);
console.log(umur); // mis. 18

Timestamp juga dipakai untuk mengukur durasi kode (catat Date.now() sebelum dan sesudah, lalu kurangkan) dan membuat ID unik sederhana (Date.now() + angka acak).

Jebakan Umum

Bulan 0-based sudah dibahas, tapi layak diulang: ini penyebab bug tanggal nomor satu. Selalu kurangi 1 dari nomor bulan manusiawi, atau pakai string ISO.

Zona waktu diam-diam menggeser tanggal. new Date("2008-05-17") di-parse sebagai tengah malam UTC, yang di Indonesia (UTC+7) menjadi 07:00 pagi di tanggal yang sama, tapi di zona UTC-5 menjadi tanggal 16 malam hari sebelumnya! Untuk aplikasi yang peduli tanggal kalender (ultah, jadwal), buat dengan komponen new Date(2008, 4, 17) yang memakai zona waktu lokal perangkat.

Date itu mutable. Method setFullYear(), setMonth(), dll. mengubah object-nya langsung, bukan mengembalikan yang baru. Kalau butuh "tanggal X plus 7 hari" tanpa merusak aslinya, salin dulu: const salin = new Date(asli.getTime()).

Perbandingan Date pakai getTime() atau operator. dateA > dateB bekerja karena Date dikonversi ke angka otomatis, tapi dateA === dateB SELALU false untuk dua object berbeda walau waktunya sama (perbandingan referensi!). Bandingkan a.getTime() === b.getTime().

Catatan teknis: Untuk format tampilan yang cantik ("8 Oktober 2026"), pakai toLocaleDateString("id-ID", { day: "numeric", month: "long", year: "numeric" }). Untuk manipulasi tanggal yang kompleks (tambah hari, beda zona waktu), pertimbangkan library seperti date-fns atau dayjs; Date bawaan cukup untuk kebutuhan dasar.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Umur Tepat

Diberi tanggal lahir new Date(2008, 4, 17). Hitung umur dalam tahun (perkiraan kasar: selisih milidetik dibagi milidetik per tahun, lalu Math.floor). Perhitungan umur dari timestamp seperti ini dipakai di fitur nyata: validasi batas usia pendaftar, label "3 hari yang lalu" di media sosial, masa berlaku promo countdown, dan pengingat jadwal yang dihitung mundur dari tanggal target.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />

</head>
<body>
<h1>Halo JS</h1>
<p>Buka console preview untuk melihat output.</p>
<script src="index.js"></script>
</body>
</html>

Open Sandbox