How to Change Date Format in React?

By Hardik Savani | May 24, 2020 | Category : React JS


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...



Tags : React JS


Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: