Mudah Bekerja dengan Waktu di JavaScript Menggunakan Moment.js

0 0 pelajar full kasus Kamis, 15 Juli 2021 Edit this post

Waktu merupakan salah jenis data yang paling sering kita temui. Bekerja dengan waktu di Javascript secara manual cukup merepotkan apa la...

Next.js: Framework React untuk Pengembangan Web yang Efisien

Bun.js: Pustaka JavaScript Modular untuk Pengembangan Aplikasi Web

Cara Membuat Convert Format Rupiah Pada PHP dan Javascript

Waktu merupakan salah jenis data yang paling sering kita temui. Bekerja dengan waktu di Javascript secara manual cukup merepotkan apa lagi jika harus berurusan dengan locale masing-masing. Untuk mengatasi masalah ini, moment.js diciptakan.

Moment.js merupakan sebuah pustaka yang didesain untuk dapat mem-parsing, memvalidasi, memanipulasi serta menampilkan tanggal dan waktu di Javascript. Pustaka ini dapat bekerja dengan baik di browser ataupun Node.js. Untuk saat ini browser yang dipakai untuk pengujian moment.js adalah IE 8, 9, dan 10 di Windows 7, IE 11 di Windows 10, Chrome di Windows XP, Firefox terbaru di Linux, dan Safari terbaru di OSX 10.8 dan 10.11.

Moment.js dapat dipasang manual dengan memanggil file javascriptnya atau dipasang menggunakan package manager.

<iframe
  src="https://carbon.now.sh/embed?bg=rgba%28171%2C+184%2C+195%2C+1%29&t=seti&wt=none&l=auto&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=npm%2520install%2520moment%2520--save%2520%2520%2520%2523%2520npm%250Ayarn%2520add%2520moment%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2523%2520Yarn%250AInstall-Package%2520Moment.js%2520%2520%2520%2523%2520NuGet%250Aspm%2520install%2520moment%2520--save%2520%2520%2520%2523%2520spm%250Ameteor%2520add%2520momentjs%253Amoment%2520%2520%2523%2520meteor%250Abower%2520install%2520moment%2520--save%2520%2523%2520bower%2520%28deprecated%29"
  style="width: 554px; height: 298px; border:0; transform: scale(1); overflow:hidden;"
  sandbox="allow-scripts allow-same-origin">
</iframe>
<iframe
  src="https://carbon.now.sh/embed?bg=rgba%28171%2C+184%2C+195%2C+1%29&t=seti&wt=none&l=auto&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=npm%2520install%2520moment%2520--save%2520%2520%2520%2523%2520npm%250Ayarn%2520add%2520moment%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2520%2523%2520Yarn%250AInstall-Package%2520Moment.js%2520%2520%2520%2523%2520NuGet%250Aspm%2520install%2520moment%2520--save%2520%2520%2520%2523%2520spm%250Ameteor%2520add%2520momentjs%253Amoment%2520%2520%2523%2520meteor%250Abower%2520install%2520moment%2520--save%2520%2523%2520bower%2520%28deprecated%29"
  style="width: 554px; height: 298px; border:0; transform: scale(1); overflow:hidden;"
  sandbox="allow-scripts allow-same-origin">
</iframe>
npm install moment --save   # npmyarn add moment             # YarnInstall-Package Moment.js   # NuGetspm install moment --save   # spmmeteor add momentjs:moment  # meteorbower install moment --save # bower (deprecated)

File moment.js memiliki ukuran hanya 16.6k dan menggunakan Bahasa Inggris. Jika ingin menggunakan bahasa lain dalam format tampilan tanggal dan waktu kita dapat menggunakan moment-with-locales.js mendukung 115 bahasa termasuk Bahasa Indonesia dan Bahasa Jawa. Berikut contoh hasil penggunaan moment.js untuk menampilkan tanggal dan waktu dalam Bahasa Indonesia dan Jawa.

// Bahasa Indonesia
moment().format('MMMM Do YYYY, h:mm:ss a'); // September 4 2017, 10:53:16 pagi
moment().format('dddd');                    // Senin
moment().format("MMM Do YY");               // Sep 4 17
moment().format('YYYY [escaped] YYYY');     // 2017 escaped 2017
moment().format();                         

moment("20111031", "YYYYMMDD").fromNow(); // 6 tahun yang lalu
moment("20120620", "YYYYMMDD").fromNow(); // 5 tahun yang lalu
moment().startOf('day').fromNow();        // 11 jam yang lalu
moment().endOf('day').fromNow();          // dalam 13 jam
moment().startOf('hour').fromNow();      

moment().subtract(10, 'days').calendar(); // 25/08/2017
moment().subtract(6, 'days').calendar();  // Selasa lalu pukul 10.53
moment().subtract(3, 'days').calendar();  // Jumat lalu pukul 10.53
moment().subtract(1, 'days').calendar();  // Kemarin pukul 10.53
moment().calendar();                      // Hari ini pukul 10.53
moment().add(1, 'days').calendar();       // Besok pukul 10.53
moment().add(3, 'days').calendar();       // Kamis pukul 10.53
moment().add(10, 'days').calendar();     

// Bahasa Jawa
moment().format('MMMM Do YYYY, h:mm:ss a'); // September 4 2017, 10:53:54 enjing
moment().format('dddd');                    // Senen
moment().format("MMM Do YY");               // Sep 4 17
moment().format('YYYY [escaped] YYYY');     // 2017 escaped 2017
moment().format();                          // 2017-09-04T10:53:54+07:00

moment("20111031", "YYYYMMDD").fromNow(); // 6 taun ingkang kepengker
moment("20120620", "YYYYMMDD").fromNow(); // 5 taun ingkang kepengker
moment().startOf('day').fromNow();        // 11 jam ingkang kepengker
moment().endOf('day').fromNow();          // wonten ing 13 jam
moment().startOf('hour').fromNow();      

moment().subtract(10, 'days').calendar(); // 25/08/2017
moment().subtract(6, 'days').calendar();  // Seloso kepengker pukul 10.54
moment().subtract(3, 'days').calendar();  // Jemuwah kepengker pukul 10.54
moment().subtract(1, 'days').calendar();  // Kala wingi pukul 10.54
moment().calendar();                      // Dinten puniko pukul 10.54
moment().add(1, 'days').calendar();       // Mbenjang pukul 10.54
moment().add(3, 'days').calendar();       // Kemis pukul 10.54
moment().add(10, 'days').calendar();      // 14/09/2017