How to Change Date Format in React?

This article will provide example of react change date format example. i would like to share with you how to change date format in react js. you can understand a concept of react convert date format example. We will look at example of how to convert date format in react. Follow bellow tutorial step of react date format yyyy mm dd to mm/dd/yyyy example.

Sometimes, we need to convert our date format from component in react. so i will hel help you how you can change date format using moment js. moment js will help you to convert date format.

Moment JS provide control on each date string and you can easily convert into another format easily.

In this example i will show you can easily change date format yyyy-mm-dd to mm/dd/yyyy, yyyy-mm-dd to dd-mm-yyyy and mm-dd-yyyy to yyyy-mm-dd format too.

So, let's follow bellow step and you can easily done.

Install Moment Package:

Here, we need to just install moment js npm package using bellow command:

npm install --save moment

Convert Date Formate:

Now we can use and convert date format as like bellow code:

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

I hope it can help you...