Hello Devs,

In this tutorial, we are going to see example of react change date format.

Follow this step by step guide given below:




Install Moment Package:

npm install --save moment



Convert Date Formate:

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 this example helps you.