How to do custom format dates in React Js

First Create New React Project using below command

create-react-app date-format

cd date-format

Create functional component named as date-format.js

import React from ‘react’;
const Date = (props) =>{
// ============ Code Here ==========
}
export default Date;

Create Array with all months Data

const montsArr = [“”,”January”, “February”, “March”, “April”, “May”, “June”, “July”, “August”, “September”, “October”, “November”, “December”];

Get all input objects and save to constants

const inputformat = props.input.split(‘-‘);
const outputformat = props.output.split(props.outputDelemeter);
const dateval = props.data.split(‘-‘);
const dateObj = {};

Construct date Object with all parameters using below loop

dateval.forEach((element, i) => {
dateObj[inputformat[i]] = element;
switch(inputformat[i]) {
case ‘M’:
dateObj.m = montsArr.findIndex(v=> v === element);
break;
case ‘m’:
dateObj.M = montsArr[Number(element)];
break;
case ‘y’:
dateObj.Y = ’20’+element;
break;
case ‘Y’:
dateObj.y = element.substring(0,2);
break;
case ‘d’:
let daysurfex = ‘th’;
if(Number(element) === 1 || Number(element) === 21){
daysurfex = ‘st’;
} else if(Number(element) === 2 || Number(element) === 22) {
daysurfex = ‘nd’;
} else if(Number(element) === 3) {
daysurfex = ‘rd’;
}
dateObj.D = element+daysurfex;

}
});

Finally construct Output String

let finalDate = ”;
outputformat.forEach((v,i) => {
if(finalDate){
finalDate+=props.outputDelemeter;
}
finalDate+=dateObj[v];
})

Return this final output string

return (

<h5>{finalDate}</h5>
)

Full Code of date-format.js

import React from ‘react’;

const Date = (props) =>{
const montsArr = [“”,”January”, “February”, “March”, “April”, “May”, “June”, “July”, “August”, “September”, “October”, “November”, “December”];
const inputformat = props.input.split(‘-‘);
const outputformat = props.output.split(props.outputDelemeter);
const dateval = props.data.split(‘-‘);
const dateObj = {};
dateval.forEach((element, i) => {
dateObj[inputformat[i]] = element;
switch(inputformat[i]) {
case ‘M’:
dateObj.m = montsArr.findIndex(v=> v === element);
break;
case ‘m’:
dateObj.M = montsArr[Number(element)];
break;
case ‘y’:
dateObj.Y = ’20’+element;
break;
case ‘Y’:
dateObj.y = element.substring(0,2);
break;
case ‘d’:
let daysurfex = ‘th’;
if(Number(element) === 1 || Number(element) === 21){
daysurfex = ‘st’;
} else if(Number(element) === 2 || Number(element) === 22) {
daysurfex = ‘nd’;
} else if(Number(element) === 3) {
daysurfex = ‘rd’;
}
dateObj.D = element+daysurfex;

}
});
let finalDate = ”;
outputformat.forEach((v,i) => {
if(finalDate){
finalDate+=props.outputDelemeter;
}
finalDate+=dateObj[v];
})
return (

<h5>{finalDate}</h5>
)

}

export default Date;

Import this class what ever you want and set input and output parameters like below

import React from ‘react’;
import Dateformat from ‘./date-format’

function App() {
return (

className=”App”>
input=’Y-m-d’ output=’D M Y’ data=’2020-10-25′ outputDelemeter = ‘ ‘/>
input=’Y-m-d’ output=’d-m-Y’ data=’2020-10-01′ outputDelemeter = ‘-‘/>
input=’Y-m-d’ output=’d/m/y’ data=’2020-10-01′ outputDelemeter = ‘/’/>
input=’d-m-Y’ output=’M D Y’ data=’09-10-2020′ outputDelemeter = ‘ ‘/>
input=’M-d-Y’ output=’Y-m-d’ data=’October-09-2020′ outputDelemeter = ‘-‘/>


);
}

export default App;

OutPut:

Output screen

GitLink: https://github.com/iamchandu/How-to-do-custom-format-dates-in-React-Js

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create your website with WordPress.com
Get started
%d bloggers like this: