Mudah Bekerja dengan Waktu di JavaScript Menggunakan Moment.js

 

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.

• moment.js
• moment-with-locales.js

<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   # npm
yarn add moment             # Yarn
Install-Package Moment.js   # NuGet
spm install moment --save   # spm
meteor add momentjs:moment  # meteor
bower 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

Situs resmi moment.js dapat dikunjungi di momentjs.com. Panduan serta dokumentasinya dapat ditemukan di sini dan di sini.

Share Share Tweet Share Share Share

KLIK

DONASI VIA PAYPAL Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi Anda membantu Admin untuk lebih giat lagi dalam membagikan template blog yang berkualitas. Terima kasih.