Reparei que ao colocar uma data, por exemplo, 01/09/2023, é renderizado a data do dia anterior 31/08/2023.
Esse problema é devido à forma como o elemento do tipo "date" do HTML lida com datas. Ele armazena as datas no formato ISO (YYYY-MM-DD), mas não inclui a informação de fuso horário. Quando você cria uma nova data em JavaScript usando essa string ISO, ela é interpretada como meia-noite (00:00:00) no fuso horário local, o que pode resultar em um dia anterior, dependendo do fuso horário do sistema.
Uma solução para garantir que a data seja representada corretamente é adicionar a informação de fuso horário à data antes de formatá-la. Você pode fazer isso definindo a hora para o meio-dia (12:00:00) no fuso horário UTC (que não tem deslocamento de fuso horário) antes de formatar a data. Dessa forma, você garante que a data não seja deslocada devido ao fuso horário local.
Portanto, minha solução foi a seguinte:
1- Criei uma const DataLocal que vai armazenar new Date(${data}T12:00:00Z), ou seja, estou utilizando new Date e passando a props data e o horário de meio dia.
2- Criei outra const agora chamada de dataFormatada que vai armazenar new Date(dataLocal).toLocaleDateString() que vai pegar somente a data e aplicar o toLocaleDateString().
3- Por fim, foi passado a const dataFormatada que vai conter a data no dia exato escolhid, ficando da seguinte forma <h5>{dataFormatada}</h5>.
Tudo isso foi feito no componente Colaborador ficando da seguinte forma:
`
import './Colaborador.css';
interface ColaboradorProps { nome: string imagem: string cargo: string corDeFundo: string data: string }
const Colaborador = ({ nome, imagem, cargo, corDeFundo, data }: ColaboradorProps) => {
const dataLocal = new Date(${data}T12:00:00Z);
const dataFormatada = new Date(dataLocal).toLocaleDateString();
return (<div className='colaborador'>
<div className='cabecalho' style={{ backgroundColor: corDeFundo }}>
<img src={imagem} alt={nome}/>
</div>
<div className='rodape'>
<h4>{nome}</h4>
<h5>{cargo}</h5>
<h5>{dataFormatada}</h5>
</div>
</div>)
}
export default Colaborador `
Talvez, não seja a melhor forma, mas funcionou pra mim.
