How can I properly display the date in the correct format?
I'm seeing the date displayed incorrectly on the screen as 32/03/2020, but the 32nd day doesn't exist.
Below is the correct date format displayed in the image. I'm new to Reactjs, can you help me identify the issue in my code and suggest a solution?
Here is my code:
class Chamado extends Component {
constructor(props) {
super(props);
this.state = {
offset: 0,
pageCount: this.props.chamados.length / this.props.perPage,
};
this.formatDate = this.formatDate.bind(this);
this.handlePageClick = this.handlePageClick.bind(this);
}
formatDate(date) {
const dateObject = new Date(date);
const day =
dateObject.getDate() + 1 < 10
? '0' + (dateObject.getDate() + 1)
: dateObject.getDate() + 1;
const month =
dateObject.getMonth() + 1 < 10
? '0' + (dateObject.getMonth() + 1)
: dateObject.getMonth() + 1;
const year = dateObject.getFullYear();
const formattedString = `${day}/${month}/${year}`;
return formattedString;
}
handlePageClick(data) {
let selected = data.selected;
let offset = Math.ceil(selected * this.props.perPage);
this.setState({
offset: offset,
});
}
render() {
const props = this.props;
return (
<SC.Container>
<SC.Title>
Histórico de <b>Chamados</b>
{this.props.chamados.length !== undefined && (
<SC.Add
title="Abrir um novo chamado"
onClick={(event) => props.setViewAbrirChamados(true)}
>
<GoPlus size="21px" color="#FFF" />
</SC.Add>
)}
</SC.Title>
<SC.List>
{this.props.chamados.length !== undefined ? (
<React.Fragment>
{props.chamados.length > 0 &&
props.chamados.map((item, index) => {
const maxOffset = this.state.offset + (props.perPage - 1);
return (
index >= this.state.offset &&
index <= maxOffset && (
<SC.Item key={item.id}>
<SC.Info>
<SC.Details>
<p>
<b>
{item.id} |{' '}
{item.titulo || item.categoria.descricao}
</b>
</p>
<p>
{this.formatDate(item.data_abertura)} -{' '}
{item.hora_abertura}
</p>
</SC.Details>
</SC.Info>
<SC.Buttons
onClick={(event) => {
props.setViewChamadoInfo(true, item.id);
}}
>
<button>
<FaInfo size="24" color="#fff" />
</button>
</SC.Buttons>
</SC.Item>
)
For reference, the correct date format can be seen in the image below: