Moment.js: Penjelasan lengkap dan contoh praktis pustaka tanggal

Informatec Digital » idiom » Moment.js: Penjelasan lengkap dan contoh praktis pustaka tanggal

Bekerja dengan tanggal dan waktu di JavaScript bisa menjadi tantangan nyata bagi pengembang web . Untungnya, alat seperti Moment.js secara signifikan menyederhanakan proses ini, membuat segalanya mulai dari pemformatan tanggal dasar hingga manipulasi dan operasi validasi yang kompleks menjadi jauh lebih mudah. ​​Jika Anda pernah merasa frustrasi mencoba mengkonversi, membandingkan, atau menampilkan tanggal dengan benar dalam proyek Anda, Moment.js mungkin telah menjadi salah satu sahabat terbaik Anda, atau setidaknya Anda harus mempertimbangkan untuk menggunakannya.

Dalam artikel ini, saya akan memberi tahu Anda semua yang perlu Anda ketahui tentang Moment.js : mulai dari fungsi utamanya dan trik-trik yang kurang dikenal, hingga contoh praktis dan integrasinya dengan pustaka lain, termasuk penjelasan yang jelas tentang sintaksnya dan tugas-tugas yang dapat Anda selesaikan dengannya. Kita juga akan melihat keterbatasannya, pembaruan terbaru, dan alternatif apa yang Anda miliki jika Anda mencari sesuatu yang lebih modern.

Apa itu Moment.js dan mengapa menjadi begitu populer?

Moment.js adalah pustaka JavaScript yang dirancang untuk memudahkan pekerjaan dengan tanggal dan waktu . Pustaka ini memungkinkan Anda untuk membuat, mengurai, memanipulasi, dan menampilkan tanggal dalam hampir semua format yang dapat dibayangkan dengan sintaks yang sederhana namun ampuh. Selama bertahun-tahun, pustaka ini telah menjadi solusi utama komunitas untuk mengatasi keterbatasan objek Date() bawaan JavaScript.

Inti dari Moment.js berpusat pada objek `moment()` , yang dapat membuat tanggal dari hampir semua input yang valid: string teks, objek Date, stempel waktu, atau langsung dengan argumen numerik. Hal ini membuatnya sangat fleksibel dan berguna dalam semua jenis proyek, mulai dari skrip kecil hingga aplikasi perusahaan yang mengelola zona waktu internasional atau catatan historis.

Apa yang membuatnya begitu sukses? Keandalannya, kemudahan penggunaannya, dan beragam alat serta plugin pendukungnya . Bahkan ketika proyek memasuki mode pemeliharaan, Moment.js mempertahankan basis pengguna yang besar dan dokumentasi yang ekstensif , memperkuat posisinya sebagai solusi tanggal terkemuka di JavaScript dan Node.js.

Fitur dan manfaat utama Moment.js

• API yang sederhana dan intuitifSalah satu keunggulan Moment.js adalah sintaksisnya yang jelas. Anda dapat melakukan operasi sederhana, seperti mendapatkan tanggal saat ini atau mengonversi string ke format tertentu, atau melakukan kalkulasi dan validasi yang rumit hanya dalam beberapa baris.
• Penguraian dan pemformatan yang fleksibelMemproses rangkaian tanggal dalam hampir semua format dan mengonversinya ke keluaran yang diinginkan tidak pernah semudah ini. Moment.js mempercepat dan mempermudah pemformatan tanggal dalam presentasi khusus..
• Manipulasi tanggal:Menambahkan atau mengurangi hari, bulan, tahun, minggu, atau satuan waktu lainnya semudah menggunakan metode Menambahkan() y mengurangi()Ini sangat berguna ketika Anda perlu bekerja dengan tanggal relatif, tanggal jatuh tempo, atau kerangka waktu yang bervariasi secara dinamis.
• Validasi yang kuatJika Anda perlu memeriksa apakah suatu tanggal valid atau ada (misalnya, 30 Februari), Moment.js memudahkan Anda. Metodenya adalah benar() Ia mampu mendeteksi kesalahan halus dalam format atau logika tanggal.
• Dukungan untuk zona waktu dan lokalisasi:Terima kasih atas plugin Anda momen-zona waktuMengonversi tanggal antar zona waktu yang berbeda sangat mudah. Anda juga dapat menampilkan tanggal yang disesuaikan dengan bahasa dan konvensi regional pengguna, yang merupakan kunci dalam aplikasi global.
• Ekosistem plugin:Selain pustaka utama, ada ekosistem plugin untuk memperluas fungsinya (kalender, kompatibilitas dengan kerangka kerja lain, format eksotis...).

Cara memulai Moment.js di proyek Anda

Instalasinya sangat mudah . ​​Anda dapat menyertakan Moment.js di HTML Anda hanya dengan satu baris kode:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

Jika Anda bekerja dengan Node.js atau lingkungan pengembangan modern, biasanya menginstalnya menggunakan npm atau yarn:

npm install moment

Setelah ini selesai, Anda dapat mengimpor Moment.js sesuai sintaksis yang Anda gunakan:

// Versión CommonJS
var moment = require('moment');
moment().format();

// ES6
import moment from 'moment';
moment().format();

Membuat tanggal: berbagai cara dan contoh praktis

Buat tanggal dengan mudah

Untuk mendapatkan tanggal dan waktu saat ini, cukup gunakan moment():

console.log(moment()); // Devuelve la fecha actual en formato ISO8601

Anda dapat membuat tanggal tertentu dengan memberikan argumen:

moment("2022-10-14"); // Crea el 14 de octubre de 2022

Anda juga dapat memulai dari string dan format tertentu, bahkan dalam mode ketat:

moment("25/12/1995", "DD/MM/YYYY", true); // Analiza y comprueba el formato

Apakah Anda memiliki objek Tanggal asli?

const fechaJS = new Date();
const miFecha = moment(fechaJS);

Memformat dan menampilkan tanggal

Moment.js memungkinkan Anda menampilkan tanggal dalam format apa pun yang dapat dibayangkan . Misalnya, untuk menampilkan tanggal saat ini sebagai hari/bulan/tahun:

moment().format('DD/MM/YYYY');

Jika Anda menginginkan rantai yang lebih manusiawi, Anda dapat menggunakan:

moment().format('MMMM Do YYYY, h:mm:ss a'); // Ejemplo: "marzo 8º 2024, 3:21:10 pm"

Beberapa token berguna untuk pemformatan :

• YYYY: tahun 4 digit
• MM: ku
• DD: hari dalam bulan
• hh o HH: waktu (format 12 jam atau 24 jam)
• mm: menit
• ss: detik
• a: pagi/sore

Misalnya, untuk hanya menampilkan waktu:

moment().format('HH:mm:ss');

Pemformatan lanjutan dengan token dan dukungan regional

Moment.js mendukung berbagai format dan terjemahan lokal . Dimungkinkan untuk beralih bahasa secara langsung untuk menampilkan nama bulan dan hari dalam bahasa lain.

moment.locale('es'); // Cambia a español
document.write(moment().format('LLLL'));
// Ejemplo: martes, 8 de marzo de 2024 15:21

Manipulasi tanggal: penambahan, pengurangan, dan perbandingan

Bekerja dengan tanggal relatif adalah salah satu kekuatan Moment.js.

• Tambahkan hari, bulan, atau tahun:

  moment().add(3, 'days').format('DD/MM/YYYY');

• Kurangi satuan:

  moment().subtract(2, 'months').format('DD/MM/YYYY');

• Awal dan akhir periode:

  moment().startOf('month').format('DD/MM/YYYY'); // Primer día del mes
  moment().endOf('month').format('DD/MM/YYYY');   // Último día del mes

Validasi tanggal dan deteksi kesalahan

Sebelum mengoperasikan tanggal, sangat penting untuk memvalidasi kebenarannya:

moment('2024-02-30', 'YYYY-MM-DD').isValid(); // false, el 30 de febrero no existe

Hal ini mencegah munculnya bug yang tidak terduga pada aplikasi yang menerima tanggal dari pengguna.

Perbandingan tanggal: periksa apakah suatu tanggal ada di antara tanggal lainnya

Moment.js menyertakan beberapa metode untuk membandingkan tanggal:

• adalahSebelum(): Memeriksa apakah suatu tanggal jatuh sebelum tanggal lainnya.
• setelah(): Memeriksa apakah suatu tanggal lebih lambat.
• isBetween(): Menunjukkan apakah suatu tanggal berada di antara dua tanggal yang diberikan.

let hoy = moment();
let ayer = moment().subtract(1, 'days');
console.log(hoy.isAfter(ayer)); // true

Menangani zona waktu dan tanggal internasional

Saat bekerja dengan pengguna di berbagai belahan dunia, zona waktu bisa menjadi masalah yang cukup rumit . Dengan plugin moment-timezone , Anda dapat dengan mudah mengkonversi tanggal antar wilayah.

const moment = require('moment-timezone');
const fechaUTC = moment('2024-05-25');
const fechaNY = fechaUTC.tz('America/New_York').format('YYYY-MM-DD HH:mm:ss');
console.log(fechaNY);
// Ejemplo: "2024-05-24 20:00:00"

Selain itu, Moment.js mampu menampilkan tanggal yang disesuaikan dengan pengaturan regional pengguna , menunjukkan nama bulan dan hari yang diterjemahkan dengan benar.

Contoh penggunaan utama dan kiat lanjutan

Dapatkan perbedaan antara tanggal

Anda dapat menghitung waktu yang berlalu antara dua tanggal dalam satuan yang berbeda:

let inicio = moment('2024-01-01');
let fin = moment('2024-03-08');
let dias = fin.diff(inicio, 'days'); // Devuelve el número de días entre ambas

Tanggal relatif dan waktu manusia

Moment.js sangat bagus untuk menampilkan pesan seperti "3 hari yang lalu" atau "dalam 5 jam":

moment().subtract(3, 'days').fromNow(); // "hace 3 días"
moment().add(2, 'hours').fromNow();    // "en 2 horas"

Kalender manusia

Fungsi calendar () menampilkan tanggal relatif seperti "kemarin pukul 17.00", "besok pukul 09.00", sehingga sangat berguna untuk aplikasi kalender.

moment().subtract(1, 'days').calendar(); // "Ayer a las..."
moment().add(3, 'days').calendar();     // "Próximo martes a las..."

Dukungan untuk lompatan tahun dan hari-hari khusus

Apakah Anda ingin tahu apakah suatu tahun merupakan tahun kabisat?

moment([2024]).isLeapYear(); // true

Metode isLeapYear() memberikan jawabannya secara langsung.

Kustomisasi lanjutan: format, token, dan penguraian ketat

Moment.js memungkinkan Anda untuk bekerja dengan string dan token khusus untuk membuat atau membaca tanggal dalam berbagai format . Selain itu, mode ketat mengharuskan pencocokan persis, mencegah kesalahan kecil dan kejutan yang tidak diinginkan.

Misalnya, untuk mengurai tanggal dalam format "hari/bulan/tahun":

moment('12/03/2023', 'DD/MM/YYYY', true);

Daftar token umum dan contohnya

• Tahun: TTTT (2024), TT (24), T (-500)
• Bulan: MM (01 – 12), MMM (Jan), MMMM (Januari)
• Día: DD (01 – 31), C (1 – 31)
• Hora: HH (00 – 23), hh (01 – 12), mm (menit), ss (detik)
• Zona waktu: Z, ZZ

Token-token ini dapat digabungkan untuk menghasilkan keluaran yang sepenuhnya disesuaikan. Lihat dokumentasi untuk daftar lengkap dan kasus-kasus khusus.