Moment.js adalah salah satu pustaka javascript yang populer digunakan untuk memanipulasi tanggal. Karena selain mudah digunakan, fiturnya pun cukup lengkap untuk berbagai macam operasi manipulasi tanggal.
Tetapi berdasarkan tulisan di sini, jika ingin memulai sebuah proyek, tim di balik moment.js menyarankan kita untuk menggunakan pustaka alternatif, selain moment.js. Berdasarkan artikel ini, ada beberapa hal yang jadi perhatian:
- Ukuran pustaka yang cukup besar, kurang-lebih 230 kb (66 kb, terkompresi gzip)
- Moment.js bersifat mutable yang berarti, operasi pada moment.js akan mengubah object aslinya, sehingga berpotensi untuk menghasilkan bug yang tidak diinginkan
- API berorientasi object yang kompleks.
Moment.js juga sudah menyatakan bahwa kedepannya mereka tidak akan menambahkan fitur-fitur baru, dan memutuskan untuk hanya melakukan pemeliharaan pada versi pembaruan berikutnya.
Maka, jika ingin memulai sebuah proyek baru, kita bisa mencoba day.js. Selain ukuran terkompresi gzip-nya hanya sebesar 2kb (jauh lebih kecil daripada moment.js), API day.js juga sangat identik dengan moment.js, sehingga proses migrasi bisa lebih mudah. Day.js juga bersifat immutable sehingga bisa meminimalisir terjadinya bug. Berikut adalah cara instalasi dan beberapa perbandingan cara penggunaan day.js dan moment.js.
Instalasi
Instalasi melalui npm bisa dilakukan dengan menggunakan perintah berikut:
$ npm install dayjsUntuk penggunaan secara langsung pada browser, day.js juga bisa dipanggil langsung dengan cara seperti berikut:
<!-- CDN example (unpkg) -->
<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script>
<script>dayjs().format()</script>Mengubah Format Tanggal
/// moment.js
const dateM1 = moment().format('D MMMM YYYY')
// 18 May 2021
const dateM2 = moment('2021-10-25').format('DD/MMM/YYYY')
// 25/Oct/2021
/// day.js
const dateD1 = dayjs().format('D MMMM YYYY')
// 18 May 2021
const dateD2 = dayjs('2021-10-25').format('DD/MMM/YYYY')
// 25/Oct/2021Menambah atau Mengurangi Tanggal
/// moment.js
// lima hari dari sekarang (18 Mei 2021)
const fiveDaysM = moment().add(5, 'days').format('D MMMM YYYY')
// 23 May 2021
// tiga bulan yang lalu (18 Mei 2021)
const threeMonthsM = moment().subtract(3, 'months').format('D MMMM YYYY')
// 18 February 2021
/// day.js
// lima hari dari sekarang (18 Mei 2021)
const fiveDaysD = dayjs().add(5, 'days').format('D MMMM YYYY')
// 23 May 2021
// tiga bulan yang lalu (18 Mei 2021)
const threeMonthsD = dayjs().subtract(3, 'months').format('D MMMM YYYY')
// 18 February 2021Menampilkan Waktu Relatif
Dayjs membutuhkan plugin RelativeTime untuk menampilkan waktu relatif. Silakan cek info plugin di sini.
/// moment.js
const relativeM1 = moment('2021-01-01').fromNow()
// 5 months ago
const relativeM2 = moment('2022-01-01').toNow()
// in 7 months
/// day.js
const relativeTime = require('dayjs/plugin/relativeTime')
dayjs.extend(relativeTime)
const relativeD1 = dayjs('2021-01-01').fromNow()
// 5 months ago
const relativeD2 = dayjs('2022-01-01').toNow()
// in 7 monthsMenampilkan Selisih Waktu
/// moment.js
const timeOneM = moment('2021-07-23')
const timeTwoM = moment('2021-02-01')
// selisih dalam milidetik
timeOneM.diff(timeTwoM)
// 14860800000
// selisih dalam hari
timeOneM.diff(timeTwoM, 'day')
// 172
// slisih dalam bulan
timeOneM.diff(timeTwoM, 'month')
// 5
/// day.js
const timeOneD = dayjs('2021-07-23')
const timeTwoD = dayjs('2021-02-01')
// selisih dalam milidetik
timeOneD.diff(timeTwoD)
// 14860800000
// selisih dalam hari
timeOneD.diff(timeTwoD, 'day')
// 172
// slisih dalam bulan
timeOneD.diff(timeTwoD, 'month')
// 5Sebelum atau Sesudah
/// moment.js
// apakah tanggal yang sama
const isSameM = moment('2021-01-01').isSame('2021/01/01')
// true
// apakah tanggal pertama adalah sebelum tanggal kedua
const isBeforeM = moment('2022-01-01').isBefore('2021/01/01')
// false
// apakah tanggal pertama adalah sesudah tanggal kedua
const isAfterM = moment('2022-01-02').isAfter('2022-01-01')
// true
/// day.js
// apakah tanggal yang sama
const isSameD = dayjs('2021-01-01').isSame('2021/01/01')
// true
// apakah tanggal pertama adalah sebelum tanggal kedua
const isBeforeD = dayjs('2022-01-01').isBefore('2021/01/01')
// false
// apakah tanggal pertama adalah sesudah tanggal kedua
const isAfterD = dayjs('2022-01-02').isAfter('2022-01-01')
// trueBisa kita lihat dari beberapa contoh di atas, API day.js relatif sama dengan moment.js, sehingga akan sangat memudahkan kita yang sudah familiar dengan moment.js untuk berpindah ke day.js di proyek baru. Selamat mencoba, semoga bermanfaat.