4

Estou estudando o componente Intl do JavaScript e preciso formatar um campo data quem vem do banco de dados para o formato brasileiro.

Formato no MySQL: 2019-12-12

E preciso transformá-lo em 12/12/2019. O monetário eu já consigo fazer desta forma:

let value = 1,000.11

new Intl.NumberFormat('pt-BR', {
                        style: 'currency',
                        currency: 'BRL'
                       }).format(value);

Estou tentando fazer da mesma forma para converter os campos data mas não estou conseguindo.

let data = 2019-12-12
new Intl.DateTimeFormat('pt-BR').format(data);
4
  • Aparentemente você está passando o valor como string para o format, mas esse método espera um objeto Date.
    – Woss
    Commented 18/12/2019 às 18:12
  • let data = 2019-12-12 - tem certeza que o código está assim? Porque isso na verdade é "2019 menos 12, menos 12", que resulta no número 1995...
    – hkotsubo
    Commented 18/12/2019 às 18:14
  • é formato que está retornando do mysql 2019-12-14 Commented 18/12/2019 às 18:18
  • Mas neste caso deveria estar entre aspas: let data = '2019-12-12' - sem aspas, o JavaScript interpreta como números
    – hkotsubo
    Commented 18/12/2019 às 18:26

3 Respostas 3

7

Primeiro você precisa entender uma coisa: datas não têm formato.

Uma data é apenas um conceito, que representa a ideia de um ponto específico na linha do tempo (ou em um sistema de calendário). No caso, 2019-12-12 e 12/12/2019 são apenas formas diferentes de se representar a mesma data (os mesmos valores do dia, mês e ano). Assim como Dec 12th, 2019 ou 12 de dezembro de 2019, são formatos diferentes, mas a data em si é a mesma.

Sendo assim, a data no MySQL não "está" em um formato. Internamente são guardados apenas os valores referentes à data. Quando você consulta os dados, aí a data é mostrada em algum formato, mas isso não significa necessariamente que ela está gravada naquele formato.

Então não está claro o que você tem. Se 2019-12-12 for uma string (ou seja, um texto representando a data), você pode criar um Date e passá-lo para Intl.DateTimeFormat:

let data = new Date('2019-12-12');
console.log(new Intl.DateTimeFormat('pt-BR', {timeZone: 'UTC'}).format(data));

Segundo a documentação, quando a string está neste formato (ano-mês-dia - ou mais especificamente falando, no formato definido pela norma ISO 8601), o horário é setado para meia-noite e considera-se que a data/hora está em UTC.

Porém, o DateTimeFormat por padrão considera o fuso horário do browser, que pode não ser o mesmo que UTC e dar uma diferença na hora de formatar a data (por exemplo, meu browser usa o Horário de Brasília, e meia-noite do dia 12 em UTC corresponde às 21h do dia 11 no Horário de Brasília). Por isso eu informei o timeZone: 'UTC' no construtor.

Na sua resposta funcionou porque você também passou os campos de horário, e neste caso o JavaScript considera o timezone do browser, por isso não é necessário informar que está em UTC.

1
  • 1
    Sempre aprendo algo novo com as suas repostas, é impressionante! :) Commented 18/12/2019 às 19:18
2

O método Intl.DateTimeFormat.prototype.format espera como parâmetro um objeto do tipo Date, então não deve passar uma string (se realmente for uma string que está passando).

const date = new Date(2019, 11, 12);
const formated = (new Intl.DateTimeFormat('pt-br')).format(date);

console.log(formated);

Vale lembrar que no Date a contagem dos meses inicia em 0, por isso o mês de Dezembro foi indicado como 11.

A partir da string basta fazer new Date('2019-12-12').

1
  • 2
    Só lembrando que o construtor que recebe números vai considerar "meia-noite no timezone do browser", enquanto o que recebe a string '2019-12-12' considera "meia-noite em UTC", o que exige uma pequena adaptação no DateTimeFormat - conforme minha resposta abaixo. E +1 por ser mais rápido que eu :-)
    – hkotsubo
    Commented 18/12/2019 às 18:32
1

Estou vendo aqui no https://developer.mozilla.org e fiz a conversão para new Date() desta forma e funcionou

let data = new Date('2019-12-14 00:00');
let print = new Intl.DateTimeFormat('pt-BR').format(data);

console.log(print);

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .