andriajah Sun May 2020 1 year ago

Bagaimana Mengubah Format Tanggal dalam React Js?

Artikel ini akan memberikan contoh format perubahan tanggal react. saya ingin berbagi dengan Anda bagaimana mengubah format tanggal di react js. Anda dapat memahami konsep contoh format tanggal react js. Kita akan melihat contoh bagaimana mengonversi format tanggal react. Ikuti langkah-langkah tutorial di bawah ini pada format tanggal yyyy mm dd ke mm/dd/yyyy.

Terkadang, kita perlu mengonversi format tanggal dari komponen react. jadi saya akan membantu Anda bagaimana Anda dapat mengubah format tanggal menggunakan moment js. moment js akan membantu Anda mengonversi format tanggal.

Saat JS menyediakan kontrol pada setiap string tanggal dan Anda dapat dengan mudah mengkonversi ke format lain dengan mudah.

Dalam contoh ini saya akan menunjukkan Anda dapat dengan mudah mengubah format tanggal yyyy-mm-dd ke mm/dd/yyyy, yyyy-mm-dd ke dd-mm-yyyy dan format mm-dd-yyyy ke yyyy-mm-dd juga.

Jadi, mari ikuti langkah di bawah ini dan Anda bisa dengan mudah melakukannya.

Install Moment Package:

Di sini, kita perlu menginstal paket js npm saat menggunakan perintah di bawah ini:

npm install --save moment

Convert Date Formate:

Sekarang kita dapat menggunakan dan mengonversi format tanggal seperti kode di bawah ini:

import React, { Component } from 'react';
import { render } from 'react-dom';
import Moment from 'moment';
  
class App extends Component {
  constructor() {
  
    this.state = {
      dateDMY: Moment("1994-07-01").format('DD-MM-YYYY'),
      dateMDY: Moment("1994-07-01").format('MM-DD-YYYY'),
      dateYMD: Moment("01-07-1994").format('YYYY-MM-DD')
    }
  }
  
  render() {
    return (
      <div>
        <p> DMY Format: { this.state.dateDMY } </p>
        <p> MDY Format: { this.state.dateMDY } </p>
        <p> YMD Format: { this.state.dateYMD } </p>
      </div>
    );
  }
}
   
render(<App />, document.getElementById('root'));

Output:

DMY Format: 01-07-1994
MDY Format: 07-01-1994
YMD Format: 1994-01-07

Saya harap ini dapat membantu Anda ...

change date format in react react js