In react material UI I just want to get the date like this 29 November 2021. But I get both the date and the time like this 2021-11-29T11:30:01.324Z & Below is my code
import React, {
useState,
useEffect,
} from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import {
Box,
Button,
Card,
CardContent,
CardHeader,
Divider,
Paper,
Typography,
makeStyles, hexToRgb
} from '@material-ui/core';
import { useHistory } from "react-router-dom";
import { dashboardApiConfig } from "src/config";
const useStyles = makeStyles((theme) => ({
root: {},
overview: {
padding: theme.spacing(3),
display: 'flex',
alignItems: 'center',
flexWrap: 'wrap',
justifyContent: 'space-between',
[theme.breakpoints.down('md')]: {
flexDirection: 'column-reverse',
alignItems: 'flex-start'
}
},
productImage: {
marginRight: theme.spacing(1),
height: 48,
width: 48
},
cardHeader: {
color: hexToRgb('#787878'),
padding: 10,
},
details: {
padding: theme.spacing(3),
display: 'flex',
alignItems: 'center',
flexWrap: 'wrap',
justifyContent: 'space-between',
[theme.breakpoints.down('md')]: {
flexDirection: 'column',
alignItems: 'flex-start'
}
}
}));
const Subscription = (user,{ className, ...rest }) => {
const [totalUserRequest, setTotalUserRequest] = useState(0);
const [totalRequest,setTotalRequest] = useState();
const [EndDate,setEndDate] = useState();
const [StartDate,setStartDate] = useState();
const headers = {
"x-api-key" : dashboardApiConfig.dashboard_api_key,
"Authorization" : "Bearer "+ localStorage.getItem('idToken')
}
useEffect(() => {
const requestOptions ={
method: 'POST',
headers: headers,
body: JSON.stringify({'apiKey':user.user.userApiKey})
}
fetch(dashboardApiConfig.dashboard_api_url+'/user/apiusagecount',requestOptions)
.then(response => response.json())
.then(data => {
setTotalUserRequest(data.RequestUsed===undefined?0:data.RequestUsed);setTotalRequest(data.RequestAllowed);
setStartDate(data.StartDate);setEndDate(data.EndDate)
})
});
const classes = useStyles();
const apiRequestCount = totalUserRequest;
const totalRequestCount = totalRequest;
const totalEndDate = EndDate;
const totalStartDate = StartDate;
const history = useHistory();
function CheckAPIRequestButtonClick() {
history.push("/api/postcode/pricing");
}
function CheckPaymentDoneButtonClick() {
history.push("/api/payment/billing");
}
return (
<Card
className={clsx(classes.root, className)}
{...rest}
>
<CardHeader title="Manage your subscription" />
<Divider />
<CardContent>
<Paper variant="outlined">
<Box className={classes.overview}>
<div >
<Typography>
<div className={classes.cardHeader} >
<h4>Payment Plan: <span><small>PAYG</small></span></h4>
</div>
</Typography>
{/* <br /> */}
<Typography>
<div className={classes.cardHeader}>
<h4>Request Used: <span>
<small>
{apiRequestCount}
/
{totalRequestCount}
request
</small>
</span> </h4>
</div>
</Typography>
{/* <br /> */}
<Typography>
<div className={classes.cardHeader}>
<h4>Request Credit Available: <span><small>{totalRequest} request</small></span></h4>
</div>
</Typography>
{/* <br /> */}
<Typography>
<div className={classes.cardHeader}>
<h4>Start Date: <span><small>{totalStartDate} </small></span></h4>
</div>
</Typography>
{/* <br /> */}
<Typography>
<div className={classes.cardHeader}>
<h4>Expiry Date: <span><small>{totalEndDate} </small></span></h4>
</div>
</Typography>
</div>
</Box>
<Divider />
<Box className={classes.details}>
<div>
</div>
<div>
</div>
<div>
<Button
color="secondary"
variant="contained"
align="left"
style={{padding:10,float:'right', right:50}}
onClick={CheckAPIRequestButtonClick}
>
Upgrade
</Button>
<Button
color="secondary"
variant="contained"
style={{padding:10,float:'right',right:700}}
onClick={CheckPaymentDoneButtonClick}
>
Billing History
</Button>
</div>
</Box>
</Paper>
</CardContent>
</Card>
);
};
Subscription.propTypes = {
user: PropTypes.object.isRequired
};
export default Subscription;

