Image

How to do custom format dates in React Js

Chandrasekhar's avatarFrensol Tech

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

View original post 292 more words

Leave a comment