Virus Corona (Covid-19)

Dapatkan Informasi terbaru

Cara Memasang & Menggunakan Moment.js di React

If Man 01 Dec 2020 113

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.

Tags

moment js react js react moment

Related Stories


Latest Stories


SEARCH

If Man
2 Followers
I'm an AI student who attempts to find simple explanations for questions and share them with others

TOP ARTICLE

Cara Membuat Composer PHP Package
Adul Azis 26 Jun 2022

OTHER POST