Tutorial Date JavaScript: Mengelola Tanggal dan Waktu

Mengelola tanggal dan waktu adalah salah satu kemampuan yang wajib dikuasai ketika bekerja dengan JavaScript, baik untuk membuat aplikasi web sederhana maupun sistem berskala besar.

Objek Date memiliki banyak fungsi untuk membantu pengembang melakukan perhitungan waktu, menampilkan tanggal dalam berbagai format, hingga membaca waktu global dengan standar internasional.

Pada bagian pertama ini, kita akan membahas dasar-dasar Date JavaScript secara menyeluruh sebelum masuk ke penggunaan lanjutan.

Daftar isi

Pengertian Objek Date JavaScript
Cara Membuat Objek Date JavaScript (Constructor & Input)
Metode Getter Date JavaScript (Mengambil Nilai Tanggal & Waktu)
Metode Setter Date JavaScript (Mengatur Tanggal & Waktu)
Timestamp, Selisih Waktu, dan Format Tanggal
Zona Waktu & Konversi Waktu di JavaScript
Penutup

Pengertian Objek Date JavaScript

JavaScript memiliki sebuah built-in object bernama Date yang dirancang khusus untuk menangani seluruh urusan tanggal dan waktu. Objek ini dapat:

Menyimpan tanggal
Mengambil komponen tanggal (tahun, bulan, hari)
Mengambil komponen waktu (jam, menit, detik)
Melakukan perhitungan durasi waktu
Mengonversi format ke timestamp
Menghasilkan format tanggal lokal maupun internasional

Dengan kata lain, Date adalah fondasi dari semua operasi waktu di JavaScript, termasuk fitur seperti kalender, hitung mundur (countdown), penjadwalan, otentikasi waktu login, hingga pembacaan waktu dari server API.

Kenapa Date Penting dalam Pemrograman Web

Pada aplikasi web modern, kebutuhan mengelola waktu semakin beragam. Berikut beberapa alasan mengapa Date JavaScript sangat penting:

Aplikasi real-time — seperti dashboard live, jam digital, waktu server, dan sistem monitoring.
Penjadwalan event — misalnya reminder, jadwal posting, timer, dan alarm.
Penyimpanan waktu di database — data log, timestamp transaksi, riwayat aktivitas.
Komunikasi dengan API global yang memakai format ISO 8601.
Analisis data — menghitung jarak antar tanggal, seperti umur, durasi event, dll.

Karena itulah, menguasai Date object merupakan bagian penting dalam kemampuan JavaScript sehari-hari.

Peran Date dalam Pengelolaan Waktu Real-Time

Saat sebuah aplikasi menampilkan jam, menghitung waktu mundur, atau sekadar menunjukkan kapan data diperbarui, semua itu terjadi karena JavaScript menjalankan fungsi Date secara terus-menerus.

Contohnya:

Jam digital yang bergerak setiap detik menggunakan new Date().getHours()
Sistem yang menampilkan “5 menit yang lalu” menghitung selisih timestamp
Aplikasi booking memvalidasi apakah tanggal check-in lebih awal atau tidak

Date object bekerja sebagai “otak waktu” yang memproses data secara real-time pada browser pengguna.

Epoch Time (1 Januari 1970) & Dasar Timestamp

JavaScript (dan sebagian besar sistem komputer modern) menggunakan konsep dasar bernama Epoch Time.

Epoch dimulai pada 1 Januari 1970, 00:00:00 UTC

Semua waktu diukur sebagai jumlah milidetik sejak titik ini

Contoh:

1690000000000

Angka tersebut adalah timestamp, yaitu representasi waktu dalam bentuk angka murni.

Keuntungan timestamp:

Tidak terikat format tanggal
Mudah dihitung dan dibandingkan
Mudah disimpan dalam database
Stabil digunakan di berbagai timezone

JavaScript menyediakan metode cepat untuk mendapatkan timestamp:

const now = Date.now();
console.log(now);Code language: JavaScript (javascript)

Konsep Local Time vs UTC Time

Salah satu penyebab kebingungan dalam Date JavaScript adalah perbedaan waktu lokal (local time) dan waktu global (UTC).

Local Time

Berdasarkan waktu perangkat pengguna (browser).
Terpengaruh zona waktu, misalnya WIB (GMT+7).
Dipengaruhi pengaturan jam pada komputer.

UTC Time

Waktu standar global tanpa zona waktu.
Digunakan pada banyak API, server, dan database.
Cocok untuk data internasional.

JavaScript menyediakan dua varian method:

getFullYear() → versi lokal
getUTCFullYear() → versi UTC

Perbedaan ini penting ketika membuat aplikasi global atau back-end yang sinkron antar negara.

Cara JavaScript Menyimpan Tanggal (Dalam Milidetik)

Walaupun Date memiliki banyak method untuk mengambil komponen tanggal, nilai inti dari Date sebenarnya adalah angka — yaitu timestamp dalam milidetik sejak Epoch 1970.

Contohnya:

const date = new Date();
console.log(date.getTime());Code language: JavaScript (javascript)

Outputnya:

1690000000000

Angka tersebut adalah representasi numerik dari waktu saat ini. Dari angka inilah JavaScript mengonversi kembali menjadi:

Tahun
Bulan
Tanggal
Jam
Menit

Ini menjelaskan mengapa Date bisa melakukan auto-correction (misalnya 32 Januari menjadi 1 Februari) — karena sistem hanya menghitung timestamp di balik layar.

Tantangan Umum: Timezone & Format Berbeda

Mengelola waktu sering menjadi sumber bug, terutama pada aplikasi internasional. Tantangan umum meliputi:

1. Perbedaan zona waktu

Setiap negara memiliki offset yang berbeda. Contoh:

Indonesia (WIB): UTC+7
Jepang: UTC+9
London: UTC+0

Jika memakai local time, hasil bisa berbeda pada setiap pengguna.

2. Format tanggal berbeda-beda

Contoh format biasa:

2025-05-10 (ISO)
10/05/2025 (Indonesia)
05/10/2025 (Amerika, beda urutan)

Karena itu disarankan menggunakan format ISO 8601 ketika bekerja dengan API atau server.

3. Parsing string yang tidak standar

Contoh yang sering gagal:

new Date("10-12-2025");Code language: JavaScript (javascript)

Browser dapat menafsirkannya berbeda-beda.

4. Daylight Saving Time (DST)

Negara tertentu mengubah waktu setiap tahun untuk musim panas & dingin — hal ini dapat menggeser jam 1 jam lebih cepat atau lambat.

Contoh Penggunaan Date Paling Dasar

Berikut contoh paling sederhana dalam membuat objek Date:

const sekarang = new Date();
console.log(sekarang);Code language: JavaScript (javascript)

Hasilnya sesuai dengan zona waktu browser pengguna:

Tue Feb 11 2025 10:15:30 GMT+0700 (Western Indonesia Time)Code language: CSS (css)

Mengambil Tahun

const tahun = sekarang.getFullYear();
console.log(tahun); // 2025Code language: JavaScript (javascript)

Mengambil Bulan

const bulan = sekarang.getMonth();
console.log(bulan); // 1 (Januari)Code language: JavaScript (javascript)

Mengambil Tanggal

const tanggal = sekarang.getDate();
console.log(tanggal); // 11Code language: JavaScript (javascript)

Mengambil Jam

const jam = sekarang.getHours();
console.log(jam); // 10Code language: JavaScript (javascript)

Mengambil Menit

const menit = sekarang.getMinutes();
console.log(menit); // 15Code language: JavaScript (javascript)

Mengambil Detik

const detik = sekarang.getSeconds();
console.log(detik); // 30Code language: JavaScript (javascript)

Contoh di atas menunjukkan bagaimana Date dipakai pada level dasar sebelum kita mempelajari manipulasi dan format lanjutan.

Cara Membuat Objek Date JavaScript (Constructor & Input)

Pada bagian ini akan membahas bagaimana membuat objek Date dengan beberapa metode yang berbeda.

1. Membuat Date Tanpa Parameter

Cara paling dasar untuk membuat objek Date adalah memanggil constructor tanpa parameter.

const sekarang = new Date();
console.log(sekarang);Code language: JavaScript (javascript)

Outputnya:

Tue Feb 11 2025 10:15:30 GMT+0700 (Western Indonesia Time)Code language: CSS (css)

Hasilnya adalah tanggal dan waktu saat ini berdasarkan timezone perangkat user.

Kelebihan:

Mudah digunakan
Cocok untuk mencatat waktu real-time, log, timestamp input, dll.

2. Membuat Date dari Timestamp

Timestamp dalam JavaScript menggunakan milidetik sejak epoch (1 Januari 1970 UTC).

const dateFromTimestamp = new Date(1700000000000);
console.log(dateFromTimestamp);Code language: JavaScript (javascript)

Catatan:

Semakin besar angka timestamp, semakin jauh tanggalnya dari 1970.
Cocok untuk menyimpan waktu secara presisi di database.

3. Membuat Date dari String

JavaScript mendukung parsing otomatis dari berbagai string tanggal.

Format ISO 8601 (disarankan search engine & API modern)

const isoDate = new Date("2025-03-10T10:30:00Z");
console.log(isoDate);Code language: JavaScript (javascript)

ISO 8601 aman karena:

Konsisten
Dipahami browser modern
Tidak tergantung lokal format user

Format umum (tetapi tidak selalu stabil)

const normalString = new Date("March 10, 2025 10:30");
console.log(normalString);Code language: JavaScript (javascript)

Format seperti “03/10/2025” bisa menimbulkan masalah:

Bisa dianggap MM/DD/YYYY atau DD/MM/YYYY
Berbeda pada tiap browser / OS

4. Membuat Date dari Parameter Lengkap

Anda dapat memberi parameter manual pada constructor:

const custom = new Date(2025, 2, 10, 10, 30, 0);
console.log(custom);Code language: JavaScript (javascript)

Urutan parameter:

(year, monthIndex, date, hours, minutes, seconds, milliseconds)

Penting: Month index dimulai dari 0

Januari = 0
Februari = 1
Maret = 2
…
Desember = 11

Jadi new Date(2025, 2, 10) menghasilkan 10 Maret 2025, bukan Februari.

5. Perbedaan `new Date()`, `Date.now()`, dan `Date.parse()`

`new Date()`

Menghasilkan objek Date.

const d = new Date();
console.log(d);Code language: JavaScript (javascript)

`Date.now()`

Menghasilkan timestamp milidetik, bukan objek Date.

const timestamp = Date.now();
console.log(timestamp);Code language: JavaScript (javascript)

`Date.parse()`

Mengubah string ke timestamp (jika valid).

const parsed = Date.parse("2025-03-10");
console.log(parsed);Code language: JavaScript (javascript)

Perlu hati-hati pada format string non-ISO → bisa memberi hasil salah.

6. Risiko Parsing String Non-Standar

Contoh format yang tidak stabil:

new Date("03/10/2025");Code language: JavaScript (javascript)

Bisa terjadi:

Di Amerika → dianggap 10 Maret 2025 (MM/DD/YYYY)
Di Eropa/Indonesia → dianggap 03 Oktober 2025 (DD/MM/YYYY)

Solusi aman:

Gunakan ISO 8601
Atau masukkan parameter lengkap: new Date(2025, 2, 10)

7. Contoh Lengkap Semua Cara Membuat Date

// 1. Tanpa parameter
const d1 = new Date();

// 2. Dari timestamp
const d2 = new Date(1700000000000);

// 3. Dari string ISO
const d3 = new Date("2025-03-10T10:30:00Z");

// 4. Dari string umum
const d4 = new Date("March 10, 2025 10:30");

// 5. Dengan parameter lengkap
const d5 = new Date(2025, 2, 10, 10, 30, 0);

// 6. Timestamp langsung
const ts = Date.now();

// 7. Parsing string ke timestamp
const parsedTs = Date.parse("2025-03-10");Code language: JavaScript (javascript)

Metode Getter Date JavaScript (Mengambil Nilai Tanggal & Waktu)

Pada bagian ini akan membahas metode getter pada objek Date.

1. Fungsi Getter pada Date — Konsep Singkat

Getter pada objek Date adalah metode untuk membaca (mengambil) komponen tanggal atau waktu dari sebuah objek Date. Getter tidak mengubah objek Date (kecuali Anda secara eksplisit memanggil setter). Getter berguna untuk menampilkan atau menghitung berdasarkan komponen waktu, misalnya menampilkan tahun, bulan, jam, atau menghitung durasi.

Contoh: date.getFullYear() → membaca tahun dari objek date.

2. `getFullYear()` — Mengambil Tahun (4-digit)

Mengembalikan nilai tahun dalam format 4 digit.

const d = new Date("2025-11-21T10:30:00Z");
console.log(d.getFullYear()); // 2025 (versi lokal)Code language: JavaScript (javascript)

Catatan: getFullYear() mengembalikan tahun lokal (bukan UTC). Jika ingin tahun UTC gunakan getUTCFullYear().

3. `getMonth()` & Month Index (0–11)

getMonth() mengembalikan indeks bulan dari 0 sampai 11:

0 = Januari
1 = Februari
…
11 = Desember

Karena itu, saat menampilkan bulan ke pengguna, biasanya kita tambahkan 1 atau map ke nama bulan.

const d = new Date("2025-11-21T10:30:00Z");
console.log(d.getMonth());     // 10 (November karena index dimulai 0)
console.log(d.getMonth() + 1); // 11 (jika ingin 1-12)Code language: JavaScript (javascript)

Contoh menampilkan nama bulan:

const months = ["Jan","Feb","Mar","Apr","Mei","Jun","Jul","Agu","Sep","Okt","Nov","Des"];
console.log(months[d.getMonth()]); // "Nov"Code language: JavaScript (javascript)

4. `getDate()` — Mengambil Tanggal (1–31)

Mengembalikan nilai tanggal dalam format 1–31.

const d = new Date("2025-11-21T10:30:00Z");
console.log(d.getDate()); // 21Code language: JavaScript (javascript)

Jangan keliru dengan getDay() (lihat bagian berikutnya) — getDate() untuk tanggal (angka bulan), getDay() untuk hari minggu → sabtu.

5. `getDay()` — Hari dalam Minggu (0–6)

getDay() mengembalikan hari dalam minggu:

0 = Minggu
1 = Senin
…
6 = Sabtu

const d = new Date("2025-11-23");
console.log(d.getDay()); // 0 (Minggu)Code language: JavaScript (javascript)

Gunakan ini saat ingin menampilkan nama hari atau memeriksa apakah tanggal adalah weekend.

6. `getHours()`, `getMinutes()`, `getSeconds()` — Komponen Waktu

Getter standar untuk jam, menit, dan detik (versi lokal):

const d = new Date("2025-11-21T10:30:45");
console.log(d.getHours());   // 10
console.log(d.getMinutes()); // 30
console.log(d.getSeconds()); // 45Code language: JavaScript (javascript)

Jika butuh versi UTC: getUTCHours(), getUTCMinutes(), getUTCSeconds().

7. `getMilliseconds()` — Fraksi Detik

Mengembalikan milidetik (0–999):

const d = new Date();
console.log(d.getMilliseconds()); // misal 123Code language: JavaScript (javascript)

Berguna untuk pengukuran waktu beresolusi tinggi atau logging.

8. `getTime()` — Timestamp (milidetik sejak Epoch)

getTime() mengembalikan nilai numerik: jumlah milidetik sejak 1 Jan 1970 UTC. Nilai ini sangat berguna untuk perbandingan atau perhitungan durasi.

const d = new Date();
console.log(d.getTime()); // contoh: 1700000000000Code language: JavaScript (javascript)

Contoh menghitung selisih dua tanggal:

const a = new Date("2025-11-21");
const b = new Date("2025-11-25");
const diffMs = b.getTime() - a.getTime(); // milidetik
const diffDays = diffMs / (1000 * 60 * 60 * 24);
console.log(diffDays); // 4Code language: JavaScript (javascript)

9. `getTimezoneOffset()` — Interpretasi Zona Waktu

getTimezoneOffset() mengembalikan perbedaan menit antara waktu lokal dan UTC:

Nilai biasanya localTime – UTC dalam menit, tetapi metode mengembalikan offset dalam menit yang harus ditambahkan ke waktu lokal untuk mendapatkan UTC.

Contoh: untuk zona waktu UTC+7 (WIB), getTimezoneOffset() mengembalikan -420 (karena lokal 7 jam lebih cepat, sehingga offset negatif).

const d = new Date();
console.log(d.getTimezoneOffset()); // misal -420 untuk UTC+7Code language: JavaScript (javascript)

Cara membacanya:

Jika hasil negatif → lokal lebih cepat dari UTC (mis. +7 jam → -420 menit).
Jika hasil positif → lokal lebih lambat dari UTC (mis. UTC-5 → +300 menit).

Gunakan offset ini saat mengonversi antara waktu lokal dan UTC.

10. Contoh Penggunaan Getter Step-by-Step (Praktis)

Contoh: format tanggal DD-MM-YYYY HH:mm:ss secara manual.

function formatLocal(date) {
    const dd = String(date.getDate()).padStart(2, "0");
    const mm = String(date.getMonth() + 1).padStart(2, "0"); // +1 karena month index 0-11
    const yyyy = date.getFullYear();
    const hh = String(date.getHours()).padStart(2, "0");
    const min = String(date.getMinutes()).padStart(2, "0");
    const ss = String(date.getSeconds()).padStart(2, "0");

    return `${dd}-${mm}-${yyyy} ${hh}:${min}:${ss}`;
}

const now = new Date();
console.log(formatLocal(now)); // contoh: "21-11-2025 17:34:05"Code language: JavaScript (javascript)

Contoh: periksa apakah hari ini weekend:

function isWeekend(date) {
    const day = date.getDay();
    return day === 0 || day === 6;
}
console.log(isWeekend(new Date())); // true/falseCode language: JavaScript (javascript)

Metode Setter Date JavaScript (Mengatur Tanggal & Waktu)

Pada bagian ini akan membahas metode setter pada objek Date.

1. Cara Kerja Setter pada Date

Setter pada objek Date digunakan untuk mengubah nilai komponen tanggal atau waktu dari objek Date yang sudah ada.

Perbedaan utama dengan getter:

Getter → membaca nilai, tidak mengubah objek
Setter → memodifikasi objek, misal mengubah bulan, tanggal, atau jam

Contoh dasar:

const date = new Date();
date.setFullYear(2026);
console.log(date);Code language: JavaScript (javascript)

2. `setFullYear()` — Mengubah Tahun

Digunakan untuk mengubah tahun pada objek Date.

const d = new Date("2025-11-21");
d.setFullYear(2030);
console.log(d); // 2030-11-21Code language: JavaScript (javascript)

Bisa juga mengubah bulan dan tanggal sekaligus:

d.setFullYear(2030, 5, 15); // Juni 15, 2030
console.log(d);Code language: JavaScript (javascript)

3. `setMonth()` — Mengubah Bulan

setMonth() mengubah bulan (0–11). Contoh:

const d = new Date("2025-11-21");
d.setMonth(0); // Januari
console.log(d);Code language: JavaScript (javascript)

Perlu diingat: index bulan mulai dari 0. Jadi 0 = Januari, 11 = Desember.

4. `setDate()` — Mengubah Tanggal

Mengubah tanggal dalam bulan (1–31).

const d = new Date("2025-11-21");
d.setDate(25);
console.log(d); // 25 November 2025Code language: JavaScript (javascript)

Auto-correction terjadi jika tanggal di luar range:

d.setDate(32); // otomatis menjadi 2 Desember 2025Code language: JavaScript (javascript)

5. `setHours()`, `setMinutes()`, `setSeconds()` — Mengubah Waktu

Setter untuk jam, menit, dan detik:

const d = new Date("2025-11-21T10:30:45");
d.setHours(15);
d.setMinutes(45);
d.setSeconds(30);
console.log(d); // 21 Nov 2025 15:45:30Code language: JavaScript (javascript)

Versi UTC: setUTCHours(), setUTCMinutes(), dst.

6. `setMilliseconds()` — Mengubah Milidetik

Mengubah fraksi detik (0–999):

const d = new Date();
d.setMilliseconds(500);
console.log(d.getMilliseconds()); // 500Code language: JavaScript (javascript)

7. `setTime()` — Mengatur Timestamp Langsung

setTime() mengubah objek Date berdasarkan timestamp milidetik:

const d = new Date();
d.setTime(1700000000000); 
console.log(d); // tanggal sesuai timestampCode language: JavaScript (javascript)

Ini sangat berguna saat mengonversi atau menyesuaikan waktu secara global.

8. Auto-Correction pada Date (Bug atau Fitur?)

JavaScript melakukan auto-correction untuk menjaga tanggal valid:

Bulan > 11 → menambah tahun otomatis
Tanggal > jumlah hari di bulan → berpindah bulan
Jam > 23 → menambah hari otomatis

Contoh:

const d = new Date(2025, 0, 32); // 32 Januari 2025
console.log(d); // 1 Februari 2025Code language: JavaScript (javascript)

Ini fitur bawaan, bukan bug. Tapi jika tidak disadari, bisa menyebabkan kesalahan logika.

Demikian pembahasan mengenai setter. Dengan setter, Anda bisa memodifikasi objek Date secara fleksibel, tapi selalu perhatikan month index dan auto-correction agar hasil tetap sesuai harapan.

Timestamp, Selisih Waktu, dan Format Tanggal

Timestamp adalah representasi waktu dalam bentuk angka, yaitu jumlah milidetik sejak 1 Januari 1970 UTC (Epoch Time).

Keunggulan timestamp:

Mudah dibandingkan antar tanggal
Cocok untuk perhitungan selisih waktu
Konsisten lintas timezone dan sistem
Bisa disimpan di database atau API dengan aman

Contoh timestamp saat ini:

const timestamp = Date.now();
console.log(timestamp); // contoh: 1700000000000Code language: JavaScript (javascript)

1. Cara Kerja `Date.now()`

Date.now() mengembalikan timestamp saat ini dalam milidetik.

Tidak membuat objek Date, hanya angka.

const now = Date.now();
console.log(now); // 1700000000000Code language: JavaScript (javascript)

Kelebihan:

Ringan dan cepat
Ideal untuk perhitungan waktu dan pengukuran performa

2. Cara Kerja `Date.parse()`

Date.parse() mengubah string tanggal menjadi timestamp.

const ts = Date.parse("2025-11-21T10:30:00Z");
console.log(ts); // 1739994600000Code language: JavaScript (javascript)

Catatan:

Gunakan format ISO 8601 agar konsisten
String non-standar bisa menimbulkan hasil salah

3. Menghitung Selisih Waktu (Hari, Jam, Menit)

Contoh menghitung selisih 2 tanggal:

const start = new Date("2025-11-21T08:00:00");
const end   = new Date("2025-11-25T12:30:00");

const diffMs = end.getTime() - start.getTime(); // selisih milidetik

const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
const diffHours = Math.floor((diffMs / (1000 * 60 * 60)) % 24);
const diffMinutes = Math.floor((diffMs / (1000 * 60)) % 60);

console.log(`Selisih: ${diffDays} hari, ${diffHours} jam, ${diffMinutes} menit`);Code language: JavaScript (javascript)

Hasil:

Selisih: 4 hari, 4 jam, 30 menitCode language: HTTP (http)

4. Konversi Timestamp ke Date dan Sebaliknya

Timestamp → Date

const ts = 1700000000000;
const dateFromTs = new Date(ts);
console.log(dateFromTs);Code language: JavaScript (javascript)

Date → Timestamp

const d = new Date("2025-11-21T10:30:00");
const ts = d.getTime();
console.log(ts); // 1739994600000Code language: JavaScript (javascript)

Dengan cara ini, Anda bisa menghitung selisih waktu dengan cepat.

5. Format Tanggal Menggunakan Locale (`toLocaleDateString`, `toLocaleTimeString`)

JavaScript mendukung format tanggal sesuai lokal pengguna.

const now = new Date();

console.log(now.toLocaleDateString("id-ID")); // 21/11/2025
console.log(now.toLocaleTimeString("id-ID")); // 17:45:30Code language: JavaScript (javascript)

Dapat disesuaikan lebih detail:

console.log(now.toLocaleDateString("id-ID", { weekday: "long", year: "numeric", month: "long", day: "numeric" }));
// "Jumat, 21 November 2025"Code language: JavaScript (javascript)

6. Format Tanggal Menggunakan `Intl.DateTimeFormat`

Intl.DateTimeFormat memberikan kontrol lebih fleksibel atas format tanggal dan waktu:

const formatter = new Intl.DateTimeFormat("id-ID", {
        weekday: "long",
        year: "numeric",
        month: "long",
        day: "numeric",
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit",
        hour12: false
});

console.log(formatter.format(new Date())); 
// "Jumat, 21 November 2025 17:45:30"Code language: JavaScript (javascript)

Kelebihan:

Multi-locale support
Konsisten di berbagai browser
Cocok untuk aplikasi internasional

7. Studi Kasus: Membuat Fitur Waktu Mundur (Countdown)

Contoh membuat countdown ke event:

const eventDate = new Date("2025-12-31T00:00:00");

function countdown() {
    const now = new Date();
    const diffMs = eventDate.getTime() - now.getTime();

    if (diffMs <= 0) {
        console.log("Event telah dimulai!");
        clearInterval(timer);
        return;
    }

    const days = Math.floor(diffMs / (1000 * 60 * 60 * 24));
    const hours = Math.floor((diffMs / (1000 * 60 * 60)) % 24);
    const minutes = Math.floor((diffMs / (1000 * 60)) % 60);
    const seconds = Math.floor((diffMs / 1000) % 60);

    console.log(`${days} hari, ${hours} jam, ${minutes} menit, ${seconds} detik`);
}

const timer = setInterval(countdown, 1000);Code language: JavaScript (javascript)

Hasilnya menampilkan countdown real-time yang otomatis update setiap detik.

Zona Waktu & Konversi Waktu di JavaScript

Timezone adalah zona waktu geografis yang mempengaruhi cara kita menampilkan dan menghitung waktu. Misalnya:

Indonesia Barat (WIB) → UTC+7
Jepang (JST) → UTC+9
London → UTC+0

Peran timezone dalam Date JavaScript:

Menentukan waktu lokal di browser user
Memengaruhi perhitungan selisih waktu antar negara
Penting untuk aplikasi global atau sistem server-client

1. Perbedaan Local Time dan UTC Time

Local Time: waktu berdasarkan pengaturan komputer/user
UTC Time: waktu standar internasional tanpa zona waktu

Contoh:

const now = new Date();
console.log(now.toString());   // waktu lokal, misal "Fri Nov 21 2025 17:45:30 GMT+0700"
console.log(now.toUTCString()); // waktu UTC, misal "Fri, 21 Nov 2025 10:45:30 GMT"Code language: JavaScript (javascript)

2. Fungsi getUTC*()

Getter versi UTC membaca komponen tanggal tanpa pengaruh timezone lokal:

const d = new Date("2025-11-21T17:45:30+07:00");

console.log(d.getUTCFullYear()); // 2025
console.log(d.getUTCMonth());    // 10 (November)
console.log(d.getUTCDate());     // 21
console.log(d.getUTCHours());    // 10
console.log(d.getUTCMinutes());  // 45
console.log(d.getUTCSeconds());  // 30Code language: JavaScript (javascript)

Kegunaan: konsisten untuk komunikasi dengan server/API global.

3. Cara Mengonversi Waktu Lokal ke UTC

Gunakan getTimezoneOffset() untuk menghitung perbedaan menit antara local dan UTC.

const localDate = new Date();
const offsetMinutes = localDate.getTimezoneOffset();
const utcDate = new Date(localDate.getTime() + offsetMinutes * 60 * 1000);
console.log(utcDate.toUTCString());Code language: JavaScript (javascript)

getTimezoneOffset() → negatif jika lokal lebih cepat dari UTC
Penambahan offset → menyesuaikan ke waktu UTC

4. Cara Mengonversi UTC ke Waktu Lokal

Jika memiliki UTC timestamp, konversi ke local time cukup dengan membuat objek Date biasa:

const utcTs = Date.parse("2025-11-21T10:45:30Z");
const localDate = new Date(utcTs);
console.log(localDate.toString()); // otomatis menyesuaikan timezone userCode language: JavaScript (javascript)

5. Memahami `getTimezoneOffset()`

getTimezoneOffset() mengembalikan perbedaan menit antara waktu lokal dan UTC.

const d = new Date();
console.log(d.getTimezoneOffset()); // misal -420 (UTC+7)Code language: JavaScript (javascript)

Interpretasi:

Nilai negatif → lokal lebih cepat dari UTC
Nilai positif → lokal lebih lambat dari UTC

Ini berguna saat melakukan konversi manual.

6. Contoh Perubahan Timezone Manual

Misal ingin menampilkan waktu untuk zona waktu tertentu:

function convertToTimeZone(date, offsetHours) {
    return new Date(date.getTime() + offsetHours * 60 * 60 * 1000);
}

const now = new Date();
const tokyoTime = convertToTimeZone(now, 9 - 7); // WIB → JST
console.log(tokyoTime.toString());Code language: JavaScript (javascript)

offsetHours = perbedaan jam antara timezone target dan lokal

7. Studi Kasus: Menampilkan Waktu Server ke Berbagai Negara

Misal server menyimpan waktu UTC:

const serverUTC = new Date("2025-11-21T10:00:00Z");

// Waktu di Jakarta (UTC+7)
const jakartaTime = new Date(serverUTC.getTime() + 7 * 60 * 60 * 1000);
console.log("Jakarta:", jakartaTime.toLocaleString("id-ID"));

// Waktu di Tokyo (UTC+9)
const tokyoTime = new Date(serverUTC.getTime() + 9 * 60 * 60 * 1000);
console.log("Tokyo:", tokyoTime.toLocaleString("ja-JP"));

// Waktu di New York (UTC-5)
const nyTime = new Date(serverUTC.getTime() - 5 * 60 * 60 * 1000);
console.log("New York:", nyTime.toLocaleString("en-US"));Code language: JavaScript (javascript)

Penutup

Semoga tutorial ini membantu Anda memahami seluk-beluk Date JavaScript dari dasar hingga lanjutan.

Jangan ragu untuk bereksperimen dengan getter, setter, timestamp, timezone, dan format agar aplikasi Anda semakin akurat, responsif, dan siap digunakan di berbagai negara. Selamat belajar dan eksplorasi waktu di dunia JavaScript!

Tutorial Date JavaScript: Mengelola Tanggal dan Waktu

Daftar isi

Pengertian Objek Date JavaScript

Kenapa Date Penting dalam Pemrograman Web

Peran Date dalam Pengelolaan Waktu Real-Time

Epoch Time (1 Januari 1970) & Dasar Timestamp

Konsep Local Time vs UTC Time

Cara JavaScript Menyimpan Tanggal (Dalam Milidetik)

Tantangan Umum: Timezone & Format Berbeda

1. Perbedaan zona waktu

2. Format tanggal berbeda-beda

3. Parsing string yang tidak standar

4. Daylight Saving Time (DST)

Contoh Penggunaan Date Paling Dasar

Mengambil Tahun

Mengambil Bulan

Mengambil Tanggal

Mengambil Jam

Mengambil Menit

Mengambil Detik

Cara Membuat Objek Date JavaScript (Constructor & Input)

1. Membuat Date Tanpa Parameter

2. Membuat Date dari Timestamp

3. Membuat Date dari String

Format ISO 8601 (disarankan search engine & API modern)

Format umum (tetapi tidak selalu stabil)

4. Membuat Date dari Parameter Lengkap

5. Perbedaan new Date(), Date.now(), dan Date.parse()

new Date()

Date.now()

Date.parse()

6. Risiko Parsing String Non-Standar

7. Contoh Lengkap Semua Cara Membuat Date

Metode Getter Date JavaScript (Mengambil Nilai Tanggal & Waktu)

1. Fungsi Getter pada Date — Konsep Singkat

2. getFullYear() — Mengambil Tahun (4-digit)

3. getMonth() & Month Index (0–11)

4. getDate() — Mengambil Tanggal (1–31)

5. getDay() — Hari dalam Minggu (0–6)

6. getHours(), getMinutes(), getSeconds() — Komponen Waktu

7. getMilliseconds() — Fraksi Detik

8. getTime() — Timestamp (milidetik sejak Epoch)

9. getTimezoneOffset() — Interpretasi Zona Waktu

10. Contoh Penggunaan Getter Step-by-Step (Praktis)

Metode Setter Date JavaScript (Mengatur Tanggal & Waktu)

1. Cara Kerja Setter pada Date

2. setFullYear() — Mengubah Tahun

3. setMonth() — Mengubah Bulan

4. setDate() — Mengubah Tanggal

5. setHours(), setMinutes(), setSeconds() — Mengubah Waktu

6. setMilliseconds() — Mengubah Milidetik

7. setTime() — Mengatur Timestamp Langsung

8. Auto-Correction pada Date (Bug atau Fitur?)

Timestamp, Selisih Waktu, dan Format Tanggal

1. Cara Kerja Date.now()

2. Cara Kerja Date.parse()

3. Menghitung Selisih Waktu (Hari, Jam, Menit)

4. Konversi Timestamp ke Date dan Sebaliknya

5. Format Tanggal Menggunakan Locale (toLocaleDateString, toLocaleTimeString)

6. Format Tanggal Menggunakan Intl.DateTimeFormat

7. Studi Kasus: Membuat Fitur Waktu Mundur (Countdown)

Zona Waktu & Konversi Waktu di JavaScript

1. Perbedaan Local Time dan UTC Time

2. Fungsi getUTC*()

3. Cara Mengonversi Waktu Lokal ke UTC

4. Cara Mengonversi UTC ke Waktu Lokal

5. Memahami getTimezoneOffset()

6. Contoh Perubahan Timezone Manual

7. Studi Kasus: Menampilkan Waktu Server ke Berbagai Negara

Penutup

1 JavaScript Dasar

2 JavaScript Menengah

3 JavaScript Lanjutan

4 JavaScript Mahir

5 JavaScript Ahli

Related article!

Comments

Leave comment

5. Perbedaan `new Date()`, `Date.now()`, dan `Date.parse()`

`new Date()`

`Date.now()`

`Date.parse()`

2. `getFullYear()` — Mengambil Tahun (4-digit)

3. `getMonth()` & Month Index (0–11)

4. `getDate()` — Mengambil Tanggal (1–31)

5. `getDay()` — Hari dalam Minggu (0–6)

6. `getHours()`, `getMinutes()`, `getSeconds()` — Komponen Waktu

7. `getMilliseconds()` — Fraksi Detik

8. `getTime()` — Timestamp (milidetik sejak Epoch)

9. `getTimezoneOffset()` — Interpretasi Zona Waktu

2. `setFullYear()` — Mengubah Tahun

3. `setMonth()` — Mengubah Bulan

4. `setDate()` — Mengubah Tanggal

5. `setHours()`, `setMinutes()`, `setSeconds()` — Mengubah Waktu

6. `setMilliseconds()` — Mengubah Milidetik

7. `setTime()` — Mengatur Timestamp Langsung

1. Cara Kerja `Date.now()`

2. Cara Kerja `Date.parse()`

5. Format Tanggal Menggunakan Locale (`toLocaleDateString`, `toLocaleTimeString`)

6. Format Tanggal Menggunakan `Intl.DateTimeFormat`

5. Memahami `getTimezoneOffset()`