Objek `Date`

Artikel ini menjelaskan tentang objek Date.

Kami akan menjelaskan objek Date langkah demi langkah, mulai dari mekanisme dasar hingga operasi yang sering digunakan dalam pekerjaan praktis, dengan contoh konkret.

YouTube Video

Objek Date

Apa itu objek Date?

Objek Date di JavaScript adalah objek standar untuk menangani tanggal dan waktu. Secara internal, objek ini mengelola tanggal dan waktu berdasarkan jumlah milidetik yang telah berlalu sejak 1 Januari 1970, 00:00:00 UTC.

Pertama, mari kita buat objek Date yang mewakili tanggal dan waktu saat ini, lalu periksa isinya.

1const now = new Date();
2console.log(now);

• Kode ini membuat objek Date yang merepresentasikan tanggal dan waktu saat ini pada waktu eksekusi. Format tampilan tergantung pada lingkungan eksekusi, seperti browser atau OS.

Cara membuat objek Date

Objek Date dapat dibuat dengan beberapa cara tergantung kebutuhan Anda. Satu hal penting yang sering salah adalah bahwa argumen konstruktor untuk bulan dimulai dari nol, artinya bulan dimulai dari 0.

1const d1 = new Date();                     // Current date and time
2const d2 = new Date("2025-01-01");         // Create from an ISO date string
3const d3 = new Date(2025, 0, 1);           // January 1, 2025 (month is zero-based)
4const d4 = new Date(2025, 0, 1, 10, 30);   // January 1, 2025, 10:30
5
6console.log(d1, d2, d3, d4);

• Pada new Date(tahun, bulan, hari), month berarti 0 adalah Januari dan 11 adalah Desember. Jika Anda tidak memahami spesifikasi ini, Anda mungkin secara tidak sengaja membuat tanggal yang meleset satu bulan, jadi selalu perhatikan.

Mengambil Setiap Elemen dari Tanggal dan Waktu

Anda dapat mengambil tahun, bulan, hari, waktu, dan hari dalam seminggu secara individu dari objek Date. Semua metode getter mengembalikan nilai berupa angka.

1const date = new Date();
2
3console.log(date.getFullYear()); // Year
4console.log(date.getMonth());    // Month (0-based: 0 = January)
5console.log(date.getDate());     // Day of the month
6console.log(date.getHours());    // Hours
7console.log(date.getMinutes());  // Minutes
8console.log(date.getSeconds());  // Seconds
9console.log(date.getDay());      // Day of the week (0 = Sunday, 6 = Saturday)

• Seperti saat pembuatan, perhatikan bahwa getMonth() juga dimulai dari nol. Saat digunakan untuk tampilan, biasanya ditambahkan 1 untuk menyesuaikan nilainya.
• getDay() mengembalikan hari dalam seminggu sebagai angka. 0 mewakili Minggu, dan 6 mewakili Sabtu.

Mengubah Tanggal dan Waktu

Date adalah objek yang dapat diubah (mutable), artinya Anda bisa mengubah nilainya nanti. Sifat ini berguna, tetapi Anda harus berhati-hati terhadap efek samping yang tidak diinginkan.

Anda dapat menggunakan metode set untuk mengubah nilai dari objek Date yang sudah ada.

1const date = new Date("2025-01-01");
2
3date.setFullYear(2026);
4date.setMonth(5);   // June
5date.setDate(15);
6
7console.log(date);

• setMonth() juga dimulai dari nol. Objek aslinya langsung dimodifikasi.

Menambah dan Mengurangkan Tanggal

Perhitungan tanggal biasanya dilakukan menggunakan milidetik atau dengan menggunakan setDate(). Untuk perhitungan berdasarkan hari, menggunakan setDate() sangat intuitif dan aman.

1const date = new Date("2025-01-01");
2
3date.setDate(date.getDate() + 7);
4console.log(date);

• Pada contoh ini, kita menghitung tanggal 7 hari setelah tanggal yang ditentukan. Bahkan jika penambahan melewati bulan baru, tanggalnya akan otomatis disesuaikan.

Membandingkan Objek Date

Objek Date dapat dibandingkan sebagai angka. Hal ini karena nilai milidetik internal yang dibandingkan.

1const a = new Date("2025-01-01");
2const b = new Date("2025-01-10");
3
4console.log(a < b);   // true
5console.log(a > b);   // false

• Jika Anda ingin menentukan urutan tanggal, tidak perlu konversi tambahan. Anda dapat menggunakan operator perbandingan secara langsung.

Bekerja Dengan Timestamp (Milidetik)

Date dapat dikonversi ke dan dari angka yang merepresentasikan milidetik (timestamp). Format ini sering digunakan dalam API atau integrasi database.

1const now = Date.now();
2console.log(now);
3
4const date = new Date(now);
5console.log(date);

• Date.now() mengembalikan waktu saat ini dalam milidetik. Fitur ini sangat berguna saat Anda ingin menyimpan atau membandingkan nilai sebagai angka.

Memformat Tanggal Sebagai String

Menampilkan objek Date apa adanya sering kali menghasilkan format yang mungkin tidak sesuai kebutuhan Anda. Oleh karena itu, Anda sebaiknya memformat tanggal secara eksplisit sesuai kebutuhan.

1const date = new Date("2025-01-01");
2
3const formatted = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
4console.log(formatted);

• Dengan memformat secara manual seperti ini, Anda dapat sepenuhnya mengontrol format tampilan. Dalam praktiknya, biasanya digunakan library untuk tujuan ini.

Perbedaan Antara Waktu UTC dan Lokal

Date menyediakan metode untuk mengelola waktu lokal maupun UTC. Penting untuk memahami perbedaan ini dengan benar untuk integrasi server dan kompatibilitas internasional.

1const date = new Date();
2
3console.log(date.getHours());    // Local time (hours)
4console.log(date.getUTCHours()); // UTC time (hours)

• Metode getUTC* selalu mengembalikan nilai berdasarkan UTC. Berhati-hatilah saat memproses data lintas zona waktu.

Kehati-hatian Saat Menggunakan Objek Date

Date itu praktis, tetapi juga memiliki beberapa aspek yang rumit. Khususnya, bulan yang dimulai dari nol dan sifat mutable-nya sering menjadi penyebab bug.

Mari kita lihat contoh spesifik di bawah ini untuk melihat dampak dari fakta bahwa Date bersifat mutable (dapat diubah).

1const original = new Date("2025-01-01");
2const copy = new Date(original);
3
4copy.setDate(10);
5
6console.log(original);
7console.log(copy);

• Jika Anda ingin mempertahankan tanggal dan waktu asli, selalu buat salinan. Dengan menyadari hal ini, Anda dapat menghindari bug yang tidak diinginkan.

Alasan mengapa Date sulit digunakan dan kriteria untuk menggunakan pustaka tambahan

Objek Date menyediakan fitur yang cukup sebagai fungsi standar, tetapi ada situasi dalam praktik di mana penggunaannya bisa menjadi sulit. Masalah umum termasuk bulan dan hari dalam seminggu dihitung dari nol, kecenderungan membingungkan waktu lokal dan UTC, serta fakta bahwa objek ini dapat diubah (mutable). Masalah-masalah ini dapat menyebabkan lebih banyak bug seiring meningkatnya pemrosesan tanggal.

Date sudah cukup untuk mengambil dan membandingkan tanggal secara sederhana, tetapi keterbacaan dan pemeliharaan kode cenderung menurun jika ada lebih banyak perhitungan tanggal atau format tampilan.

Jika Anda memiliki kebutuhan seperti berikut, Anda mungkin ingin mempertimbangkan menggunakan pustaka tanggal ringan seperti dayjs atau date-fns.

• Anda perlu menangani zona waktu secara eksplisit
• Anda sering perlu melakukan perhitungan tanggal atau interval
• Anda ingin mengubah format tampilan secara fleksibel
• Anda ingin menangani tanggal dan waktu secara immutable (tidak dapat diubah)

Ringkasan

Objek Date adalah alat paling mendasar untuk menangani tanggal dan waktu di JavaScript. Dengan memahami keunikan dan melaksanakan pembuatan, pengambilan, perhitungan, serta pemformatan dengan benar, Anda dapat menggunakannya dengan aman dalam pekerjaan nyata.

Setelah menguasai dasarnya, penggunaan library tanggal sesuai kebutuhan merupakan pilihan yang praktis.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video