Menguasai format tanggal di JavaScript menjadi kunci untuk mengembangkan web yang lebih intuitif dan efisien. Tidak hanya sebagai penanda waktu, date format JavaScript berperan vital dalam “menghidupkan” data dan interaksi user di berbagai web.

Artikel ini akan membawamu pada perjalanan untuk memahami JavaScript date format, sebuah elemen yang sering tidak terlihat namun dapat dimanfaatkan untuk meningkatkan fungsionalitas dan user experience dalam web app.

Mulai dari menggali dasar-dasar objek Date sampai mengeksplorasi teknik pemformatan, kita akan menelusuri setiap sudut penting yang perlu diketahui oleh web developer. Yuk, simak!

Pola Format Tanggal Umum

Ada beberapa pola format tanggal yang sering digunakan dalam berbagai web app, seperti yang paling umum adalah format DD/MM/YYYY. Format ini menampilkan tanggal terlebih dahulu, diikuti oleh bulan, dan diakhiri dengan tahun.

Selain itu, ada juga format waktu yang sering digunakan, seperti HH:mm:ss yang menunjukkan jam, menit, dan detik. Format ini penting untuk aplikasi yang memerlukan penandaan waktu yang tepat, seperti aplikasi pemesanan atau pencatatan kegiatan.

Untuk menerapkan pola format tanggal dan waktu tersebut di JavaScript, kamu bisa menggunakan Intl.DateTimeFormat, yaitu bagian dari Internationalization API yang disediakan oleh JavaScript.

Intl.DateTimeFormat memungkinkan kamu memformat tanggal dan waktu sesuai dengan lokalisasi yang diinginkan. Kamu dapat menentukan opsi untuk menyesuaikan format, seperti memilih untuk menampilkan tanggal dalam format "hari-bulan-tahun" atau "bulan-hari-tahun", serta menentukan apakah ingin menampilkan waktu dalam format 12 jam atau 24 jam.

Contoh penggunaan Intl.DateTimeFormat adalah sebagai berikut:

Dalam contoh di atas, Intl.DateTimeFormat dipakai untuk memformat tanggal sesuai dengan standar lokal Indonesia ('id-ID'), dengan format tahun, bulan, dan hari. Hasilnya adalah string tanggal yang diformat sesuai dengan pola DD/MM/YYYY.

Sintaksis Objek Date

Sintaksis dasar untuk membuat objek Date adalah menggunakan constructor new Date(). Objek Date ini bisa menyimpan tanggal dan waktu saat ini atau tanggal tertentu yang ditentukan oleh user.

Berikut beberapa cara dasar untuk menggunakan constructor new Date():

#1 Tanggal dan waktu saat ini

Untuk mendapatkan tanggal dan waktu saat ini, kamu cukup menggunakan new Date() tanpa parameter.

#2 Tanggal tertentu

Kamu juga bisa membuat objek Date dengan tanggal tertentu. Ada beberapa cara untuk melakukannya:

Menggunakan string tanggal (misalnya: "YYYY-MM-DD" atau "MM/DD/YYYY"):

Menggunakan parameter tahun, bulan, dan tanggal

Menggunakan timestamp (jumlah milidetik sejak 1 Januari 1970 UTC):

#3 Mengatur waktu

Setelah membuat objek Date, kamu bisa mengatur waktu (jam, menit, detik, dan milidetik) menggunakan metode seperti setHours(), setMinutes(), setSeconds(), dan setMilliseconds().

Metode Dasar Format Tanggal JavaScript dan Contohnya

JavaScript menyediakan beberapa metode bawaan untuk memformat tanggal, memudahkan developer untuk menampilkan tanggal dalam berbagai format sesuai kebutuhan. Berikut penjelasan dari beberapa metode dasar tersebut beserta contohnya:

#1 Metode toDateString()

Metode toDateString() mengonversi bagian tanggal dari objek Date menjadi string yang mudah dibaca. Metode ini hanya menampilkan tanggal, bulan, dan tahun, tanpa informasi waktu.

Contoh penggunaan:

#2 Metode toISOString()

Metode toISOString() sangat berguna untuk format internasional karena mengikuti format ISO 8601. Format ini mencakup tanggal lengkap dengan waktu dan zona waktu dalam format UTC.

Contoh penggunaan:

#3 Metode toLocaleDateString()

Metode toLocaleDateString() menyediakan representasi lokal dari tanggal yang berguna untuk menyesuaikan tampilan tanggal sesuai dengan konvensi lokal. Metode ini memungkinkan kamu menentukan lokalisasi dan opsi format.

Contoh penggunaan tanpa spesifikasi lokalisasi:

Contoh penggunaan dengan spesifikasi lokalisasi (misalnya Indonesia):

Untuk spesifikasi lokalisasi menggunakan toLocaleDateString dalam JavaScript, kamu harus menggunakan kode negara ISO. Daftar lengkap kode negara ISO dapat ditemukan di W3Schools, di bagian nilai parameter.

Contoh penggunaan untuk lokalisasi Indonesia adalah sebagai berikut:

Dengan menggunakan kode 'id-ID', format tanggal akan sesuai dengan standar yang digunakan di Indonesia.

Penutup

Dalam artikel di atas, kita telah menjelajahi berbagai aspek penting dari date format dalam JavaScript. Dengan ini, kita memahami bagaimana objek Date dapat digunakan untuk menyimpan sekaligus memanipulasi data tanggal dan waktu.

Walaupun JavaScript sendiri menawarkan kemampuan dasar untuk memformat tanggal dan waktu, namun ada kalanya developer membutuhkan fungsi tambahan yang lebih kompleks. Di sinilah library seperti Moment.js dan Day.js menjadi berguna. Kedua library ini menyediakan fungsi ekstra seperti menghitung selisih hari, bulan, dan tahun.

Meskipun demikian, untuk kebutuhan pemformatan tanggal yang lebih sederhana, objek Date bawaan JavaScript sudah memadai. Pilihan penggunaan antara library tambahan atau memanfaatkan objek Date bawaan JavaScript tergantung pada kompleksitas dan kebutuhan spesifik proyek pengembangan web.

FAQ (Frequently Asked Question)

Bagaimana cara menambah atau mengurangi hari dari tanggal di JavaScript?

Untuk menambah atau mengurangi hari, kamu bisa menggunakan metode setDate() dan getDate(). Contohnya, kamu ingin menambah 5 hari ke tanggal saat ini:

Apa itu timestamp dalam JavaScript dan bagaimana cara menggunakannya?

Timestamp adalah representasi numerik dari suatu titik waktu. Di JavaScript, timestamp diukur dalam milidetik sejak 1 Januari 1970 UTC.

Untuk mendapatkan timestamp dari objek Date, gunakan metode getTime().

Bagaimana cara mendapatkan nama hari dari suatu tanggal?

Kamu bisa menggunakan toLocaleDateString() dengan opsi untuk mendapatkan nama hari.