JavaScript adalah salah satu dari tiga teknologi web mendasar yang akan Anda gunakan saat mengembangkan situs web atau aplikasi web
Saat membuat halaman web ini, pada titik tertentu, Anda mungkin perlu menggunakan tanggal karena alasan tertentu – seperti menampilkan saat sesuatu diunggah, disimpan, dan sebagainya
Pada artikel ini, Anda akan mempelajari cara memformat tanggal dalam JavaScript dan melihat bagaimana Anda dapat melakukan ini dengan pustaka tanggal JavaScript populer yang dikenal sebagai momen. js
Cara Mendapatkan Tanggal di JavaScript
Dalam JavaScript, Anda menggunakan konstruktor new Date()_ atau Date() untuk mendapatkan tanggal Anda (baik tanggal saat ini atau tanggal tertentu)
Konstruktor new Date() mengembalikan objek let objectDate = new Date(); let day = objectDate.getDate(); console.log(day); // 23 let month = objectDate.getMonth(); console.log(month + 1); // 8 let year = objectDate.getFullYear(); console.log(year); // 2022 0 baru, sedangkan konstruktor Date() mengembalikan representasi string dari tanggal dan waktu saat ini
let stringDate = Date(); console.log(stringDate); // "Tue Aug 23 2022 14:47:12 GMT-0700 (Pacific Daylight Time)" let objectDate = new Date(); console.log(objectDate); // Tue Aug 23 2022 14:47:12 GMT-0700 (Pacific Daylight Time) _Tanggal format lengkap ini terdiri dari hari, bulan, tahun, menit, jam, dan informasi lain yang tidak selalu Anda perlukan
Perhatian utama Anda adalah untuk melihat bagaimana Anda dapat memformat nilai tanggal ini untuk mengembalikan tanggal dalam format yang dapat dibaca, yang dapat Anda sematkan di halaman web Anda agar semua orang dapat memahaminya.
Cara Memformat Tanggal di JavaScript
Memformat tanggal tergantung pada Anda dan kebutuhan Anda. Di beberapa negara, bulan datang sebelum hari, lalu tahun (22/06/2022). Di lain, hari datang sebelum bulan, lalu tahun (22/06/2022), dan banyak lagi
Terlepas dari formatnya, Anda ingin memecah nilai objek tanggal dan mendapatkan informasi yang diperlukan yang Anda inginkan untuk halaman web Anda
Ini dimungkinkan dengan metode tanggal JavaScript. Ada banyak dari metode ini, tetapi karena Anda hanya memperhatikan tanggal dalam artikel ini, Anda hanya memerlukan tiga di antaranya
- let objectDate = new Date(); let day = objectDate.getDate(); console.log(day); // 23 let month = objectDate.getMonth(); console.log(month + 1); // 8 let year = objectDate.getFullYear(); console.log(year); // 2022 2 – Anda akan menggunakan metode ini untuk mendapatkan tahun sebagai angka empat digit (yyyy). Misalnya, 2022
- let objectDate = new Date(); let day = objectDate.getDate(); console.log(day); // 23 let month = objectDate.getMonth(); console.log(month + 1); // 8 let year = objectDate.getFullYear(); console.log(year); // 2022 3 – Anda akan menggunakan metode ini untuk mendapatkan bulan sebagai angka antara 0-11, dengan setiap angka mewakili bulan dari Januari hingga Desember. Misalnya, let objectDate = new Date(); let day = objectDate.getDate(); console.log(day); // 23 let month = objectDate.getMonth(); console.log(month + 1); // 8 let year = objectDate.getFullYear(); console.log(year); // 2022 4 akan menjadi indeks untuk bulan Maret karena ini adalah pengindeksan berbasis nol (artinya dimulai dari let objectDate = new Date(); let day = objectDate.getDate(); console.log(day); // 23 let month = objectDate.getMonth(); console.log(month + 1); // 8 let year = objectDate.getFullYear(); console.log(year); // 2022 5)
- let objectDate = new Date(); let day = objectDate.getDate(); console.log(day); // 23 let month = objectDate.getMonth(); console.log(month + 1); // 8 let year = objectDate.getFullYear(); console.log(year); // 2022 6 – Anda akan menggunakan metode ini untuk mendapatkan hari sebagai angka antara 1-31 (ini bukan indeks, tetapi nilai hari yang tepat, jadi dimulai dari 1 bukan 0)
Catatan. Metode ini hanya dapat diterapkan atau hanya akan bekerja dengan konstruktor new Date(), yang mengembalikan objek tanggal
let objectDate = new Date(); let day = objectDate.getDate(); console.log(day); // 23 let month = objectDate.getMonth(); console.log(month + 1); // 8 let year = objectDate.getFullYear(); console.log(year); // 2022Anda akan melihat bahwa let objectDate = new Date(); let day = objectDate.getDate(); console.log(day); // 23 let month = objectDate.getMonth(); console.log(month + 1); // 8 let year = objectDate.getFullYear(); console.log(year); // 2022 _8 ditambahkan ke nilai let objectDate = new Date(); let day = objectDate.getDate(); console.log(day); // 23 let month = objectDate.getMonth(); console.log(month + 1); // 8 let year = objectDate.getFullYear(); console.log(year); // 2022 9 di atas. Ini karena bulan let objectDate = new Date(); let day = objectDate.getDate(); console.log(day); // 23 let month = objectDate.getMonth(); console.log(month + 1); // 8 let year = objectDate.getFullYear(); console.log(year); // 2022 5 diindeks. Nilai dimulai dari let objectDate = new Date(); let day = objectDate.getDate(); console.log(day); // 23 let month = objectDate.getMonth(); console.log(month + 1); // 8 let year = objectDate.getFullYear(); console.log(year); // 2022 5. Ini berarti let format1 = month + "/" + day + "/" + year; console.log(format1); // 7/23/2022 let format2 = day + "/" + month + "/" + year; console.log(format2); // 23/7/2022 let format3 = month + "-" + day + "-" + year; console.log(format3); // 7-23-2022 let format4 = day + "-" + month + "-" + year; console.log(format4); // 23-7-2022 2 akan berarti Agustus, bukan let format1 = month + "/" + day + "/" + year; console.log(format1); // 7/23/2022 let format2 = day + "/" + month + "/" + year; console.log(format2); // 23/7/2022 let format3 = month + "-" + day + "-" + year; console.log(format3); // 7-23-2022 let format4 = day + "-" + month + "-" + year; console.log(format4); // 23-7-2022 3
Pada titik ini, Anda telah dapat mengekstraksi semua nilai tanggal dari objek tanggal. Anda sekarang dapat mengaturnya dalam format apa pun yang Anda inginkan
let format1 = month + "/" + day + "/" + year; console.log(format1); // 7/23/2022 let format2 = day + "/" + month + "/" + year; console.log(format2); // 23/7/2022 let format3 = month + "-" + day + "-" + year; console.log(format3); // 7-23-2022 let format4 = day + "-" + month + "-" + year; console.log(format4); // 23-7-2022Di atas, Anda menggabungkan nilai menggunakan operator plus. Anda juga dapat menggunakan literal templat untuk menggabungkan
let format1 = `${month}/${day}/${year}`; console.log(format1); // 7/23/2022 let format2 = `${day}/${month}/${year}`; console.log(format2); // 23/7/2022 let format3 = `${month}-${day}-${year}`; console.log(format3); // 7-23-2022 let format4 = `${day}-${month}-${year}`; console.log(format4); // 23-7-2022Sekarang, Anda telah melihat cara yang mungkin Anda inginkan untuk memformat tanggal Anda
Skenario lain dapat terjadi jika Anda ingin nilai bulan dan hari didahului dengan 0 jika itu adalah nilai numerik tunggal (dari 1-9). Untuk melakukan ini, Anda perlu menambahkan kondisi untuk menangani ini sebelum memformat tanggal Anda
if (day < 10) { day = '0' + day; } if (month < 10) { month = `0${month}`; } let format1 = `${month}/${day}/${year}`; console.log(format1); // 07/23/2022Tertarik dengan cara lain Anda dapat memformat tanggal dalam JavaScript?
Cara Memformat Tanggal di JavaScript dengan Moment. js
Momen. js adalah perpustakaan tanggal dan waktu JavaScript yang dapat Anda gunakan untuk memformat tanggal Anda dengan cepat tanpa menangani logika dengan begitu banyak baris kode
Untuk menggunakan pustaka ini, Anda harus menginstal paket di proyek Anda menggunakan salah satu opsi pilihan Anda di dokumentasi
Untuk panduan ini, Anda hanya memperhatikan bagaimana Anda dapat memformat tanggal dengan Momen. js
Untuk memformat nilai tanggal/waktu ini, yang harus Anda lakukan hanyalah memasukkan format pilihan Anda, dan itu akan mengembalikan tanggal yang diformat seperti yang terlihat di bawah ini
let dateFormat1 = moment().format('D-MM-YYYY'); console.log(dateFormat1); // 23-08-2022 let dateFormat2 = moment().format('D/MM/YYYY'); console.log(dateFormat2); // 23/08/2022 let dateFormat3 = moment().format('MM-D-YYYY'); console.log(dateFormat3); // 08-23-2022 let dateFormat4 = moment().format('MM/D/YYYY'); console.log(dateFormat4); // 08/23/2022Kesimpulan
Artikel ini telah mengajari Anda cara memformat tanggal dalam JavaScript, baik dari awal atau dengan momen. perpustakaan js
Berhati-hatilah saat menggunakan perpustakaan untuk proyek kecil, karena perpustakaan meningkatkan ukuran proyek Anda. Ini karena pustaka ini dirancang untuk menangani lebih banyak operasi. Tetapi untuk menggunakan operasi minimal apa pun, Anda tetap harus menginstal seluruh pustaka
Anda selalu disarankan untuk melakukan operasi sederhana seperti ini dari awal. Yaitu, kecuali jika Anda terpaksa menggunakan perpustakaan, atau perpustakaan telah diinstal, atau Anda sedang mengerjakan proyek skala besar yang memerlukan pemformatan rumit
Bersenang-senang membuat kode
IKLAN
IKLAN
IKLAN
IKLAN
Pengembang Frontend & Penulis Teknis
Jika Anda membaca sejauh ini, tweet ke penulis untuk menunjukkan bahwa Anda peduli. Tweet terima kasih
Belajar kode secara gratis. Kurikulum open source freeCodeCamp telah membantu lebih dari 40.000 orang mendapatkan pekerjaan sebagai pengembang. Memulai