HDTuto.com

React JS Change Date Format Example



This post will give you example of how to convert date format in react. you will learn react date format yyyy mm dd to mm/dd/yyyy example. This post will give you simple example of react change date format example. step by step explain how to change date format in react js. Let's get started with react convert date format 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...




June 17, 2020 | Category : React



Blog Search