ahmadajah03 Tue Dec 2020 1 year ago

Cara Memasang & Menggunakan Moment.js di React

Dalam panduan ini, saya akan menunjukkan cara mengatur dan menggunakan moment.js di React. Mari kita mulai:

Instalasi

Kita hanya dapat menggunakan package moment tetapi saya akan menyarankan Anda untuk menggunakan  momen react juga. Muncul dengan JSX tag praktis  yang mengurangi banyak pekerjaan.

npm install --save moment react-moment

Opsional : Anda juga dapat menginstal moment-timezone paket. Diperlukan untuk menggunakan fungsi terkait zona waktu.

npm install --save moment-timezone

Contoh

Sekarang mari kita lihat beberapa contoh.

Dapatkan tanggal waktu saat ini:

App.js

import React from 'react';

import moment from 'moment'
import Moment from 'react-moment';

function App() {
  const currentDateTime = moment()

  return(
    <Moment>{currentDateTime}</Moment>
  )
}

export default App;

Format tanggal waktu:

import React from 'react';

import moment from 'moment'
import Moment from 'react-moment';

function App() {
  const currentDateTime = moment()

  return(
    <Moment format='MMMM Do YYYY, h:mm:ss a'>{currentDateTime}</Moment>
  )
}

export default App;

Tambah dan Kurangi:

import React from 'react';

import moment from 'moment'
import Moment from 'react-moment';

function App() {
  const currentDateTime = moment()

  return(
    <div>
      <Moment add={{ hours: 12 }}>{currentDateTime}</Moment> <br/>
      <Moment add={{ days: 1, hours: 12 }}>{currentDateTime}</Moment> <br/>
      <Moment subtract={{ hours: 12 }}>{currentDateTime}</Moment> <br/>
      <Moment subtract={{ days: 1, hours: 12 }}>{currentDateTime}</Moment>
    </div>
  )
}

export default App;

Penggunaan Zona Waktu:

import React from 'react';

import moment from 'moment'
import Moment from 'react-moment';
import 'moment-timezone';

function App() {
  const currentDateTime = moment()

  return(
    <div>
      Dhaka: <Moment unix tz="Asia/Dhaka">
          {currentDateTime}
      </Moment><br/>
      Los Angeles: <Moment unix tz="America/Los_Angeles">
          {currentDateTime}
      </Moment>
    </div>
  )
}

export default App;

Lihat halaman moment.js ,  react-moment & moment-timezone untuk mempelajari lebih lanjut.

Itu dia. Terima kasih sudah membaca.

moment js react js react moment