Entrar Ainda não tem acesso?
2
respostas

Date no angular

por Natali Sâmara Domingos da Silva
| 62.9k xp | 77 posts
Analista de Suporte

Estou com um problema de conversão onde salvo no banco de dados no formato yyyy-MM-dd e apresento na tela no formato dd/MM/yyyy. Para converter o formato criei a seguinte função:

 private formatarDataParaExibicao(data: string | Date): string {
        const dataObj = typeof data === 'string' ? new Date(data) : data;

        if (!(dataObj instanceof Date)) {
            // Lidar com casos em que 'data' não é nem uma string nem um objeto Date
            return '';
        }

        const dia = ('0' + dataObj.getDate()).slice(-2);
        const mes = ('0' + (dataObj.getMonth() + 1)).slice(-2); // Ajuste para compensar o índice zero
        const ano = dataObj.getFullYear();

        return `${dia}/${mes}/${ano}`;
    }

Até esta indo para o formato que desejo na tela dd/MM/yyyy, porém na apresentação esta me roubando um dia. Por exemplo esta salvo no banco de dados 2023-12-27 e com a conversão aparece na tela 26/12/2023.

Qual seria o problema do meu código?

2 respostas
por Estudante
| 569.5k xp | 1338 posts

E aí, Natali! Beleza?

Quando se trabalha com datas em JavaScript ou Angular, é sempre bom considerar os fusos horários para evitar surpresas. Aqui está uma sugestão de como você pode ajustar a função em Angular para exibir a data no formato desejado (dd/MM/yyyy):

private formatarDataParaExibicao(data: string | Date): string {
    const dataObj = typeof data === 'string' ? new Date(data + 'Z') : data; // Adicionando 'Z' para considerar UTC

    if (!(dataObj instanceof Date)) {
        return '';
    }

    const dia = ('0' + (dataObj.getUTCDate())).slice(-2);
    const mes = ('0' + (dataObj.getUTCMonth() + 1)).slice(-2); 
    const ano = dataObj.getUTCFullYear();

    return `${dia}/${mes}/${ano}`;
}

Note que eu adicionei um 'Z' à string de data (new Date(data + 'Z')). Isso ajuda a garantir que a data seja interpretada no fuso horário UTC, o que pode ajudar a resolver o problema do dia a menos.

Teste essa modificação e veja se resolve o seu problema.

por Victor Costa Santos
| 1937.4k xp | 3735 posts
Alura Scuba Team Monitor de ForumOps

Olá, Natali!

A dica do colega é valido, mas contextualizando, o que pode está acontecendo é que o objeto Date caso utilizado no JavaScript considera o fuso horário local. Quando você passa uma data no formato 'yyyy-MM-dd' para o construtor de Date, ele interpreta isso como uma data UTC(Tempo Universal Coordenado). Então, quando você chama os métodos para obter o dia, mês e ano, ele os converte para o fuso horário local.

Se o fuso horário estiver atrás do UTC, como no nosso caso, a data pode ser "roubada" de um dia, como você mencionou. Por exemplo, aqui no Brasil, no horário de Brasília, quando são 11h da noite no UTC, são por volta de 2 da manhã, então ele tenta converter para o horário local e o horário local está diferente do UTC, enquanto um vai ser o dia Z o outro é o Y e ele acaba subtraindo um dia.

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!