Ada 3 cara untuk memformat tanggal dengan mudah dalam DD/MM/YYYY di JavaScript. Salah satu metodenya adalah 1-liner. Mari jelajahi metodenya
Metode untuk Memformat Tanggal DD/MM/YYYY di JavaScript
Berikut adalah daftar 3 metode di mana kita dapat memformat tanggal dalam DD/MM/YYYY dalam JavaScript
- Format Tanggal dengan gaya Pre-ES6
- Format Tanggal dengan gaya ES6
- toLocaleDateString() Metode
Mari kita lihat setiap detail dengan ilustrasi di bawah ini
1. Format Tanggal dengan gaya Pre-ES6
Sementara sebagian besar dari kita akan menggunakan ES6 untuk membuat kode, akan ada beberapa basis kode yang masih akan melakukan pengembangan dengan kode pra-es6
Alur Proses
- Dapatkan tahun, bulan, dan hari masing-masing dengan metode getFullYear(), getMonth() dan getDate()
- Jika month atau day kurang dari 10, kita beri awalan 0
- Kembalikan string tanggal dalam format DD/MM/YYYY
Di bawah ini menunjukkan contoh di mana kami mengembangkan logika yang dinyatakan dalam aliran proses
function formatDate(date = new Date()) { var day, month, year; year = date.getFullYear(); month = date.getMonth() + 1; day = date.getDate(); if (month < 10) { month = '0' + month; } if (day < 10) { day = '0' + day; } return day + '/' + month + '/' + year; } // Use current date without passing in var ddmmyyyy = formatDate(); console.log(ddmmyyyy); // "03/05/2022" // Pass in other date const xday = new Date('2022-03-30'); ddmmyyyy = formatDate(xday); console.log(ddmmyyyy); // "30/03/2022"
2. Format Tanggal dengan gaya ES6
Untuk gaya es6, kami akan memodifikasi gaya Pra-ES6. Kami akan menggunakan padStart_() adalah bagian dari metode objek bawaan standar String asli dalam JavaScript
Fitur-fiturnya meliputi
- Tambahkan string tambahan ke nilai aslinya
- Padding dapat dilakukan berkali-kali dalam 1 eksekusi hingga mencapai panjang minimum
- Padding akan dilakukan dari awal string
- Terima 2 parameter. const formatDate = (date = new Date()) => { let year, month, day; year = date.getFullYear(); month = date.getMonth() + 1; day = date.getDate(); month = month.toString().padStart(2, 0); day = day.toString().padStart(2, 0); return `${day}/${month}/${year}`; } // Use current date without passing in var ddmmyyyy = formatDate(); console.log(ddmmyyyy); // "03/05/2022" // Pass in other date const xday = new Date('2022-03-30'); ddmmyyyy = formatDate(xday); console.log(ddmmyyyy); // "30/03/2022"_0 untuk menunjukkan panjang minimum string dan const formatDate = (date = new Date()) => { let year, month, day; year = date.getFullYear(); month = date.getMonth() + 1; day = date.getDate(); month = month.toString().padStart(2, 0); day = day.toString().padStart(2, 0); return `${day}/${month}/${year}`; } // Use current date without passing in var ddmmyyyy = formatDate(); console.log(ddmmyyyy); // "03/05/2022" // Pass in other date const xday = new Date('2022-03-30'); ddmmyyyy = formatDate(xday); console.log(ddmmyyyy); // "30/03/2022"1 untuk menunjukkan string padding
Alur Proses
- Dapatkan tahun, bulan, dan hari masing-masing dengan metode getFullYear(), getMonth() dan getDate()
- Menggunakan const formatDate = (date = new Date()) => { let year, month, day; year = date.getFullYear(); month = date.getMonth() + 1; day = date.getDate(); month = month.toString().padStart(2, 0); day = day.toString().padStart(2, 0); return `${day}/${month}/${year}`; } // Use current date without passing in var ddmmyyyy = formatDate(); console.log(ddmmyyyy); // "03/05/2022" // Pass in other date const xday = new Date('2022-03-30'); ddmmyyyy = formatDate(xday); console.log(ddmmyyyy); // "30/03/2022"_5 ke pad 0 di depan selama panjang string aslinya kurang dari 2
- Kembalikan string tanggal dalam format DD/MM/YYYY
Di bawah ini menunjukkan contoh di mana kami mengembangkan logika yang dinyatakan dalam aliran proses
const formatDate = (date = new Date()) => { let year, month, day; year = date.getFullYear(); month = date.getMonth() + 1; day = date.getDate(); month = month.toString().padStart(2, 0); day = day.toString().padStart(2, 0); return `${day}/${month}/${year}`; } // Use current date without passing in var ddmmyyyy = formatDate(); console.log(ddmmyyyy); // "03/05/2022" // Pass in other date const xday = new Date('2022-03-30'); ddmmyyyy = formatDate(xday); console.log(ddmmyyyy); // "30/03/2022"_
3. toLocaleDateString() Metode
const formatDate = (date = new Date()) => { let year, month, day; year = date.getFullYear(); month = date.getMonth() + 1; day = date.getDate(); month = month.toString().padStart(2, 0); day = day.toString().padStart(2, 0); return `${day}/${month}/${year}`; } // Use current date without passing in var ddmmyyyy = formatDate(); console.log(ddmmyyyy); // "03/05/2022" // Pass in other date const xday = new Date('2022-03-30'); ddmmyyyy = formatDate(xday); console.log(ddmmyyyy); // "30/03/2022"7() adalah bagian dari metode objek bawaan standar Tanggal asli dalam JavaScript
Fitur-fiturnya meliputi
- Jika menambahkan parameter en-GB, maka akan ditampilkan dalam format British English
Di bawah ini menunjukkan contoh di mana kita akan membuat objek tanggal terlebih dahulu. Selanjutnya, kami menggunakan const formatDate = (date = new Date()) => { let year, month, day; year = date.getFullYear(); month = date.getMonth() + 1; day = date.getDate(); month = month.toString().padStart(2, 0); day = day.toString().padStart(2, 0); return `${day}/${month}/${year}`; } // Use current date without passing in var ddmmyyyy = formatDate(); console.log(ddmmyyyy); // "03/05/2022" // Pass in other date const xday = new Date('2022-03-30'); ddmmyyyy = formatDate(xday); console.log(ddmmyyyy); // "30/03/2022"_8 untuk menampilkan dalam format tanggal dan const formatDate = (date = new Date()) => { let year, month, day; year = date.getFullYear(); month = date.getMonth() + 1; day = date.getDate(); month = month.toString().padStart(2, 0); day = day.toString().padStart(2, 0); return `${day}/${month}/${year}`; } // Use current date without passing in var ddmmyyyy = formatDate(); console.log(ddmmyyyy); // "03/05/2022" // Pass in other date const xday = new Date('2022-03-30'); ddmmyyyy = formatDate(xday); console.log(ddmmyyyy); // "30/03/2022"9 jika kami juga menginginkan waktu
const myDate = new Date('2022', '2', '30'); console.log(myDate.toLocaleDateString('en-GB')); // 30/03/2022 console.log(myDate.toLocaleString('en-GB')); // "30/03/2022, 00:00:00"_
Kesimpulan
Kami telah melihat 3 metode berbeda untuk memformat tanggal dalam DD/MM/YYYY dalam JavaScript
toLocaleDateString()_ adalah yang termudah karena merupakan satu liner. Namun tidak memberikan keleluasaan untuk mengubah format dengan mudah. Oleh karena itu, kita dapat memilih