Farih.co.id
Home Programming Cara Menangani Manajemen Tanggal dan Waktu di React Menggunakan Moment.js

Cara Menangani Manajemen Tanggal dan Waktu di React Menggunakan Moment.js

clocK image to symbolize time on linux

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 library 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:

 npm install moment

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 momen dari paket yang diinstal.

 import React from 'react';
import moment from 'moment';

function App() {

  const date = moment().format("MMMM DD YYYY");
  const time = moment().format("HH mm ss");

  return (
    <div>
      <p> Today's date is { date } </p>
      <p> The time is { time } </p>
    </div>
  )
}

export default App

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 dalam 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 date = moment('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 khusus untuk komponen tanggal dan waktu, dan melakukan operasi lain yang berlaku.

Misalnya:

 import React from 'react';
import moment from 'moment';

function App() {

  const tomorrow = moment().add(1, 'day').format("Do MMMM,YYYY");
  const time = moment().subtract(1, 'hour').format("HH:mm:ss");
  const lastYear = moment().set('year', 2022).set('month', 1).format("Do MMMM,YYYY");
  const hour = moment().get('hour');

  return (
    <div className="App">
      <p>Tomorrow's date is { tomorrow }</p>
      <p>This was the time: { time }, an hour ago</p>
      <p>{ lastYear }</p>
      <p>{ hour }</p>
    </div>
  )
}

export default App

Dalam contoh ini, Anda mendeklarasikan variabel JavaScript berikut: besok, waktu, tahun laluDan 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, menitDan 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:

 import React from 'react';
import moment from 'moment';

function App() {

  const date = moment('2920130000', 'Do-MMMM-YYYY').toDate();
  console.log( date );

  return (
    <div></div>
  )
}

export default App

Pada blok kode di atas, momen() metode akan mengurai string ini ‘2920130000’ menggunakan string format “Do-MMMM-YYYY”. Itu hingga saat ini() metode mengonversi 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 pustaka 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:

 import React from 'react';
import moment from 'moment';

function App() {

  const yesterday = moment().subtract(7, 'day');
  const time1 = yesterday.fromNow();
  const time2 = yesterday.toNow();

  return (
    <div>
     <p>{ time1 }</p>
     <p>{ time2 }</p>
    </div>
  )
}

export default App

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 seterusnya. Namun, dengan informasi yang diberikan, Anda lebih dari siap untuk mulai menggunakan Moment.js di aplikasi React Anda.

Comment
Share:

Leave a Reply

Your email address will not be published. Required fields are marked *

Ad