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:
GitLink: https://github.com/iamchandu/How-to-do-custom-format-dates-in-React-Js
