Moment.js adalah perpustakaan yang fantastis untuk menangani manajemen tanggal dan waktu secara efisien dalam aplikasi React.

Mengelola tanggal dan waktu di React dapat menimbulkan tantangan bagi mereka yang kurang terbiasa dengan area tersebut. Untungnya, ada beberapa pustaka yang dapat membantu Anda dengan manajemen tanggal dan waktu di React. Salah satu perpustakaan ini adalah Moment.js.

Moment.js adalah pustaka ringan dengan cara sederhana untuk memanipulasi dan memformat tanggal dan waktu dalam JavaScript.

Menginstal Perpustakaan Moment.js

Momen.js perpustakaan adalah paket untuk mengelola operasi tanggal dan waktu dalam JavaScript. Menginstal library Moment.js adalah langkah pertama dalam menggunakan Moment.js di aplikasi React Anda. Anda dapat melakukan ini dengan menjalankan perintah berikut di terminal Anda:

momen pemasangan npm

Setelah instalasi selesai, Anda dapat menggunakan Moment.js di komponen React Anda.

Menggunakan Moment.js untuk Menampilkan Tanggal dan Waktu

Anda dapat menggunakan Moment.js untuk menampilkan tanggal dan waktu dalam format tertentu di dalam aplikasi React Anda. Untuk menggunakan perpustakaan, impor

instagram viewer
momen dari paket yang diinstal.

impor Reaksi dari'reaksi';
impor momen dari'momen';
fungsiAplikasi() {


const tanggal = momen().format("MMMM DD YYYY");
const waktu = momen().format("HH mm ss");


kembali (




 Hari initanggalnya adalah { tanggal } 


 Waktunya adalah { waktu } </p>
 </div>
 )
}


eksporbawaan Aplikasi

Itu momen() metode membuat objek momen baru yang mewakili titik waktu tertentu. Itu format() metode memformat objek momen menjadi representasi string.

Itu format() metode mengambil argumen string yang menentukan format yang diinginkan untuk objek momen. Argumen string dapat menyertakan kombinasi huruf dan karakter khusus, masing-masing dengan arti tertentu.

Beberapa karakter khusus tersebut adalah:

  • YYYY: Tahun dengan empat digit
  • Y Y: Tahun dengan dua digit
  • MM: Bulan dengan dua digit
  • M: Bulan dengan satu atau dua digit
  • MMMM: Bulan dalam kata-kata
  • DD: Hari dalam sebulan dengan dua digit
  • D: Hari dalam sebulan dengan satu atau dua digit
  • Melakukan: Hari dalam bulan dengan urutan
  • HH: Jam dengan dua digit
  • H: Jam dengan satu atau dua digit
  • mm: Menit dengan dua digit
  • M: Menit dengan satu atau dua digit
  • ss: Kedua dengan dua digit
  • S: Kedua dengan satu atau dua digit

Ketika Aplikasi komponen di blok kode sebelumnya dirender, tanggal dan waktu saat ini ditampilkan dalam format yang ditentukan di layar.

Itu momen() metode dapat mengambil argumen tanggal atau waktu string. Ketika momen() metode memiliki argumen tanggal atau waktu string, itu menciptakan objek momen yang mewakili tanggal atau waktu itu. String bisa dalam berbagai format, seperti ISO 8601, RFC 2822, atau stempel waktu Unix.

Misalnya:

const tanggal = saat('1998-06-23').format("MMMM DD YYYY");

Menggunakan Moment.js untuk Memanipulasi Tanggal dan Waktu

Pustaka Moment.js juga menyediakan beberapa metode untuk memanipulasi tanggal dan waktu. Metode ini memungkinkan Anda menambah atau mengurangi interval waktu, menetapkan nilai spesifik untuk komponen tanggal dan waktu, dan melakukan operasi lain yang berlaku.

Misalnya:

impor Reaksi dari'reaksi';
impor momen dari'momen';
fungsiAplikasi() {


const besok = momen().tambahkan(1, 'hari').format("Lakukan MMMM, YYYY");
const waktu = momen().kurangi(1, 'jam').format("HH: mm: ss");
const tahun lalu = momen().set('tahun', 2022).mengatur('bulan', 1).format("Lakukan MMMM, YYYY");
const jam = momen().dapatkan('jam');


kembali (


"Aplikasi">
Besoktanggalnya adalah {besok}


Ini adalah waktu: { time }, satu jam yang lalu</p>


{ tahun lalu </p>


{ jam </p>
 </div>
 )
}


eksporbawaan Aplikasi

Dalam contoh ini, Anda mendeklarasikan variabel JavaScript berikut: besok, waktu, tahun lalu, Dan jam. Keempat variabel ini menggunakan berbagai metode library Moment.js untuk memanipulasi tanggal dan waktu.

Itu besok variabel menggunakan the menambahkan() metode untuk menambahkan satu hari ke tanggal saat ini. Itu menambahkan() metode menambahkan waktu ke objek Momen yang diberikan. Fungsi mengambil dua argumen: nilai durasi dan string yang mewakili satuan waktu untuk ditambahkan. Satuannya bisa bertahun-tahun, bulan, minggu, hari, jam, menit, Dan detik.

Anda juga dapat mengurangi waktu menggunakan mengurangi() metode. Dalam hal ini, waktu variabel menggunakan the mengurangi() metode untuk mengurangi satu jam dari waktu saat ini.

Menggunakan mengatur() metode, yang tahun lalu variabel menetapkan tahun hingga 2022 dan bulan hingga Februari (sejak Januari direpresentasikan sebagai bulan 0). Itu mengatur() metode menetapkan unit waktu tertentu ke objek Momen.

Dengan mendapatkan() metode, Anda dapat mengambil waktu tertentu. Itu mendapatkan() metode mengambil satu argumen, satu unit waktu.

Menggunakan Moment.js untuk Mengurai Tanggal dan Waktu

Fitur bermanfaat lainnya dari Moment.js adalah kemampuannya untuk mengurai tanggal dan waktu dari string. Ini dapat berguna saat bekerja dengan data dari sumber eksternal.

Untuk mengurai tanggal atau waktu dari sebuah string, Anda perlu menggunakan the momen() metode. Dalam hal ini, momen() metode membutuhkan dua argumen, string tanggal dan string format.

Berikut adalah contoh bagaimana Anda dapat menggunakan momen() metode untuk mengurai tanggal dan waktu:

impor Reaksi dari'reaksi';
impor momen dari'momen';
fungsiAplikasi() {


const tanggal = saat('2920130000', 'Lakukan-MMMM-YYYY').hingga saat ini();
menghibur.log( tanggal );


kembali (


</div>
 )
}
eksporbawaan Aplikasi

Pada blok kode di atas, momen() metode akan mengurai string ini '2920130000' menggunakan string format "Do-MMMM-YYYY". Itu hingga saat ini() metode mengubah objek momen menjadi objek Tanggal JavaScript asli.

Itu hingga saat ini() metode tidak mengambil argumen dan mengembalikan objek Tanggal JavaScript yang mewakili tanggal dan waktu yang sama dengan objek momen.

Menampilkan Waktu Relatif

Dengan library Moment.js, Anda dapat memformat dan menampilkan waktu relatif. Untuk melakukan ini, Anda menggunakan mulai sekarang() Dan sekarang() metode. Metode ini menampilkan waktu antara tanggal tertentu dan waktu saat ini.

Misalnya:

impor Reaksi dari'reaksi';
impor momen dari'momen';
fungsiAplikasi() {


const kemarin = momen().kurangi(7, 'hari');
const time1 = kemarin.fromNow(); // 7 hari yang lalu
const waktu2 = kemarin.keSekarang(); // dalam 7 hari


kembali (




{ waktu1 </p>


{ waktu2 </p>
 </div>
 )
}


eksporbawaan Aplikasi

Dalam contoh ini, mulai sekarang() metode mengembalikan waktu relatif berlalu sejak tanggal yang ditentukan, sedangkan sekarang() metode mengembalikan waktu relatif hingga waktu saat ini.

Lebih ke Moment.js

Moment.js adalah perpustakaan yang kuat yang menyediakan cara sederhana untuk memanipulasi dan memformat tanggal dan waktu dalam JavaScript. Anda telah mempelajari cara memanipulasi, menampilkan, dan mengurai tanggal dan waktu di React menggunakan Moment.js.

Moment.js menawarkan beberapa metode lain, seperti local, startOf, endOf, dan sebagainya. Namun, dengan informasi yang diberikan, Anda lebih dari siap untuk mulai menggunakan Moment.js di aplikasi React Anda.