menengahdateformatMenengah4 mnt baca

Date: Format & Manipulasi

Bekerja dengan tanggal seperti profesional: format lokal Indonesia dengan toLocaleDateString, tambah/kurang hari dengan setDate, hitung selisih waktu dalam milidetik, plus jebakan parsing string dan zona waktu.

Kenapa Tanggal Itu Menyebalkan?

Tanggal rumit karena format beda negara (08/09: Agustus atau September?), bulan yang dihitung dari 0, dan zona waktu. Objek Date plus method format berbasis locale menyelesaikan tiga operasi paling sering: menampilkan, menggeser, dan mengukur selisih.

Membuat Date

javascript

new Date();              // sekarang
new Date(2026, 9, 8);    // 8 Oktober 2026 (bulan 9 = Oktober! 0-11)
new Date(2026, 9, 8, 14, 30); // 8 Okt 2026 jam 14:30
Date.now();              // timestamp milidetik sekarang (number)

Ingat: bulan dihitung dari 0, tanggal dari 1. Sumber bug klasik.

Format Indonesia dengan toLocaleDateString

Cara termudah menampilkan tanggal ramah manusia:

javascript

const d = new Date(2026, 9, 8);
d.toLocaleDateString("id-ID", {
  weekday: "long",   // "Kamis"
  year: "numeric",   // 2026
  month: "long",     // "Oktober"
  day: "numeric",    // 8
});
// "Kamis, 8 Oktober 2026"

Variasikan opsinya sesuai kebutuhan:

javascript

const d = new Date(2026, 9, 8);
d.toLocaleDateString("id-ID"); // "8/10/2026" (default pendek)
d.toLocaleDateString("id-ID", { dateStyle: "full" }); // "Kamis, 8 Oktober 2026"
d.toLocaleDateString("id-ID", { dateStyle: "medium" }); // "8 Okt 2026"

Contoh realistis: daftar jadwal dengan format konsisten.

javascript

const jadwal = [
  { acara: "Gladi bersih TKA", tanggal: new Date(2026, 9, 12) },
  { acara: "Ujian TKA", tanggal: new Date(2026, 9, 26) },
];

jadwal.forEach(j => {
  const tgl = j.tanggal.toLocaleDateString("id-ID", { dateStyle: "full" });
  console.log(`${j.acara}: ${tgl}`);
});
// Gladi bersih TKA: Senin, 12 Oktober 2026
// Ujian TKA: Senin, 26 Oktober 2026

Manipulasi: Geser Hari, Jam, Menit

setDate (dan setHours, setMinutes, setMonth) otomatis menangani ganti bulan/tahun, jauh lebih aman daripada aritmatika manual.

javascript

const besok = new Date();
besok.setDate(besok.getDate() + 1);

const mingguLalu = new Date();
mingguLalu.setDate(mingguLalu.getDate() - 7);

const akhirBulan = new Date(2026, 9, 31); // 31 Okt + 1 hari
akhirBulan.setDate(akhirBulan.getDate() + 1);
console.log(akhirBulan.toLocaleDateString("id-ID")); // otomatis jadi 1 November!

Contoh realistis: hitung tanggal jatuh tempo 14 hari dari sekarang, lewati akhir pekan.

javascript

function jatuhTempo(hariKerja = 14) {
  const tgl = new Date();
  let ditambah = 0;
  while (ditambah < hariKerja) {
    tgl.setDate(tgl.getDate() + 1);
    const hari = tgl.getDay(); // 0 = Minggu, 6 = Sabtu
    if (hari !== 0 && hari !== 6) ditambah++;
  }
  return tgl;
}
console.log(jatuhTempo().toLocaleDateString("id-ID", { dateStyle: "full" }));

Selisih Waktu: Kurangi Saja

Pengurangan dua Date menghasilkan MILIDETIK; bagi dengan konstanta waktu:

javascript

const a = new Date(2026, 9, 1);
const b = new Date(2026, 9, 8);
const selisihHari = (b - a) / (1000 * 60 * 60 * 24);
console.log(selisihHari); // 7

Contoh realistis: hitung mundur plus label ramah ("3 hari lagi", "terlambat 2 hari").

javascript

function statusTenggat(tenggat) {
  const sisaHari = Math.ceil((tenggat - Date.now()) / (1000 * 60 * 60 * 24));
  if (sisaHari < 0) return `Terlambat ${-sisaHari} hari!`;
  if (sisaHari === 0) return "Hari ini tenggatnya!";
  return `Sisa ${sisaHari} hari`;
}
console.log(statusTenggat(new Date(2026, 9, 26)));

Math.ceil membuat sisa 2,1 hari terbaca "3 hari" (masih 3 hari kalender).

Jebakan Umum

Bulan 0-11: new Date(2026, 9, 8) adalah Oktober. Ingat saat hardcode.
Parsing string ambigu: new Date("08/09/2026") dibaca MM/DD/YYYY (9 Agustus!), bukan DD/MM. Aman: format ISO new Date("2026-09-08") atau konstruktor numerik.
Zona waktu: new Date("2026-10-08") dianggap UTC tengah malam, bisa jadi tanggal 7 di WIB. Untuk tanggal kalender, new Date(2026, 9, 8) memakai zona lokal.
Membandingkan Date dengan ===: dua objek Date tidak pernah sama meski waktunya identik. Bandingkan dengan getTime() atau kurangi langsung.
Untuk kebutuhan kompleks (zona waktu, kalender non-Gregorian, durasi), jangan tulis manual: pakai library seperti date-fns atau dayjs.

Ringkasan

Format dengan toLocaleDateString("id-ID", {...}), geser dengan setDate(getDate() ± n), ukur selisih via pengurangan (milidetik). Waspadai: bulan dari 0, parsing ambigu, zona waktu.

Live Playground

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

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

Tantangan

Hitung Mundur

Diberi tanggal ujian new Date(2026, 9, 26). Hitung sisa hari dari SEKARANG (bulatkan ke atas dengan Math.ceil), tampilkan "Sisa N hari menuju ujian". Hitung mundur tenggat adalah fitur nyata di aplikasi belajar, event organizer, dan e-commerce (flash sale): pola selisih-tanggal-dibagi-konstanta-waktu ini dipakai berulang-ulang.

<!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